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
只包括元素节点，不包括文本节点
