01-JS中子节点

JS中子节点

 1  <!DOCTYPE html>
 2  <html>
 3  
 4      <head>
 5          <meta charset="UTF-8">
 6          <title></title>
 7      </head>
 8  
 9      <body>
10  
11          <ul id="ul1">
12              <li></li>
13              <li></li>
14          </ul>
15  
16      </body>
17      <script type="text/javascript">
18          window.onload = function() {
19              //获得ul
20              var oul = document.getElementById("ul1");
21              //当前节点的所有的子节点
22              //alert(oul.childNodes.length);
23  
24              for(var i = 0; i < oul.childNodes.length; i++) {
25                  //报错：文本节点没有 style 样式
26                  //oul.childNodes[i].style.background = "red";
27                  //console.log(oul.childNodes[i].nodeType);
28                  //兼容性问题：
29                  //低版本的浏览器： 能正常显示子标签的个数
30                  //高版本的浏览器： 将文字节点也统计在其中
31  
32                  if(oul.childNodes[i].nodeType == 1) {
33                      oul.childNodes[i].style.background = "red";
34                  }
35              }
36  
37             //alert(oul.children.length);
38 
39         }
40    </script>
41 
42 </html>

子节点
1） childNodes
asdfasfas -> 文本节点

<ul id="ul1">
空文本节点 <li></li>
空文本节点 <li></li>空文本节点
</ul>

//获得ul
var oul = document.getElementById("ul1");
//当前节点的所有的子节点
alert(oul.childNodes.length);

兼容性问题：
低版本的浏览器：能正常显示子标签的个数
高版本的浏览器：将文字节点也统计在其中

困扰：将 li的背景色换成红色

2）nodeType
3 --> 文本节点
1 --> 元素节点

3) children
只包括元素节点，不包括文本节点