获取子节点 · JavaScript

## childNodes(所有子节点) ## children(所有子元素) 使用这个属性获取子元素比较方便.IE6-8可能会获取到注释节点. ## hasChildNodes() 该方法返回布尔值,判断是否有子节点.空白页算是子节点. ## 节点操作,隔行变色 ``` <body> <ul id="mv"> <li>西施</li> <li>貂蝉</li> <li>王昭君</li> <li>杨玉环</li> </ul> <script> var mv = document.getElementById('mv'); if (mv.hasChildNodes()) { for (let i = 0; i < mv.children.length; i++) { var li = mv.children[i]; if (i % 2 == 0) { li.style.backgroundColor = 'red'; } else { li.style.backgroundColor = 'skyblue'; } } } </script> ``` ## 第一个子节点和最后一个子节点 ``` <div id="box"> <div>这是一个广告图片</div> <ul> <li>这是一个列表</li> </ul> <span>说明性文字</span> </div> <script> var box = document.getElementById('box'); console.log(box.firstChild);//第一个子节点 console.log(box.lastChild);//最后一个子节点 console.log(box.firstElementChild);//第一个子元素 console.log(box.lastElementChild); //最后一个子元素 </script> ```