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

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.  
10.             var btton = document.createElement('input');
11.             btton.type = 'text';
12.             document.getElementById('div1').appendChild(btton);
13.         };
14.     };
15. </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的区别

这个就是

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>

转载于:https://my.oschina.net/Andyahui/blog/611610

• 点赞
• 收藏
• 分享
• 文章举报