JavaScript基础插曲—获取标签,插入元素,操作样式

时间:2022-04-21 16:58:20

Js基础

1:document.write()

这个是动态创建元素内容,利用js。这个可以利用js来创建元素,文本,标签等,document.write()与document.writeln()的区别就在于writeln()输出内容后,会在源代码中换一行,而write()会紧挨着输出不会有任何换行。这个标签必须随页面一同加载显示。

在一个网页中引用其它网页可以使用js的document.write(html代码),这样子生成。

2:最基本的dom遍历属性

àdocument.getElementById()

根据元素id获取元素,使用这个,不是集合,是单个的元素。

àdocument.getElementsByName()

但是这个特殊,根据元素的name获取元素,这个放回的是对象数组,和下面获取到的是集合只有上面的获取到的是单个的元素。在表单元素的时候使用最好。

à document.getElementsByTagName()

这个也是获取元素,根据页面上标签的名字获取所有的元素,获取到的是个集合。

Eg:按钮实现里面内容变化

  1. <script type="text/javascript">
  2.     window.onload = function() {
  3.         var inputs = document.getElementsByTagName('input');
  4.         for (var i = 0; i < inputs.length; i++) {
  5.             inputs[i].onclick = function () {
  6.                 for (var c = 0; c < inputs.length; c++) {
  7.                     if(inputs[c].type=="button") {
  8.                         inputs[c].value = '哈哈哈';
  9.                     }
  10.                 }
  11.                 this.value = '呜呜';
  12.             };
  13.         }
  14.     };
  15. </script>

Eg:利用计时器实现使用说明的等待时间。

  1. <script type="text/javascript">
  2.     window.onload = function () {
  3.         var ss = 4;
  4.         //这里启动计时器
  5.            var time=setInterval(function() {
  6.                var sa = document.getElementById('btn1');
  7.                if (ss > 0) {
  8.                    sa.value = '请稍等几分钟' + ss + '';
  9.                    ss--;
  10.                } else {
  11.                    sa.value = '同意';
  12.                    sa.disabled = false;
  13.                    clearInterval(time);
  14.                }
  15.            }, 1000);
  16.     };
  17. </script>

àdocument.createElement('标签名');

  1. <script type="text/javascript">
  2.     window.onload = function() {
  3.         document.getElementById('btn').onclick = function() {
  4.             var alink = document.createElement('a'); //动态创建元素
  5.             alink.href = 'http://www.baidu.com';
  6.             alink.target = '_black';
  7.             alink.innerText = '百度';
  8.             document.getElementById('div1').appendChild(alink); //将其添加到div中.
  9.             var btton = document.createElement('input');
  10.             btton.type = 'text';
  11.             document.getElementById('div1').appendChild(btton);
  12.         };
  13.     };
  14. </script>

删除层中元素

  1. document.getElementById('btn1').onclick = function() {
  2.     var sss = document.getElementById('div1');
  3.     while (sss.firstChild) {
  4.         sss.removeChild(sss.firstChild);
  5.     }
  6. };

***:在程序中需要判断类型,我们可以利用typeof()来得到其变量的类型。

innerText.和innerHTML的区别

这个就是

JavaScript基础插曲—获取标签,插入元素,操作样式

Eg:往table中添加内容。

下面的dict格式是json的格式,也是一种键值对的形式。

  1. <title></title>
  2. <script type="text/javascript">
  3.     var dict = {
  4.         '百度': 'http://www.baidu.com',
  5.         '京东': 'http://www.jd.com',
  6.         '淘宝': 'http://www.taobao.com',
  7.     };
  8.     window.onload = function() {
  9.         document.getElementById('btn').onclick = function() {
  10.             var table = document.createElement('table');
  11.             table.border = '1';
  12.             table.backgroundColor = 'red';
  13.             for (var key in dict) {
  14.                 var tr = document.createElement('tr');
  15.                 var td1 = document.createElement('td');
  16.                 td1.innerHTML = key;
  17.                 var td2 = document.createElement('td');
  18.                 td2.innerHTML = '<a href="' + dict[key] + '">' + key + '</a>';
  19.                 tr.appendChild(td1);
  20.                 tr.appendChild(td2);
  21.                 table.appendChild(tr);
  22.             }
  23.             document.body.appendChild(table);
  24.         };
  25.     };
  26. </script>

Js操作样式

注意:

修改元素的样式不是设置class属性,而是className属性。class是js中的一个保留字,属性不能使用关键字,保留字就变为了classname。

使用方式,属性名.style,注意这里的属性名可能和css中的名字不一样,我们要注意区分。

  1. <script type="text/javascript">
  2.     window.onload = function() {
  3.         document.getElementById('btn').onclick = function() {
  4.             var div = document.getElementById('div').style;
  5.             div.backgroundColor = 'red';
  6.             div.border = '1px solid blue';
  7.             div.width = '200px';
  8.             div.height = '400px';
  9.             div.fontFamily = '楷体';
  10.             div.styleFloat = 'right';
  11.         };
  12.         document.getElementById('btn1').onclick = function() {
  13.             document.getElementById('div').style.display = 'none';
  14.         };
  15.     };
  16. </script>