DOM节点（2）
1）首尾子节点
--有兼容性问题
--firstChild、firstElementChild---第一个子节点
--lastChild、lastElementChild---最后一个子节点
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script> 7 window.onload = function (){ 8 var oUl = document.getElementById('ul1'); 9 //oUl.firstChild.style.background = 'red'; 10 //var first = oUl.firstChild||firstElementChild;//解决兼容性问题 11 oUl.firstElementChild.style.background = 'red'; 12 13 14 } 15 </script> 16 </head> 17 18 <body> 19 <ul id="ul1"> 20 <li>aaaaaa</li> 21 <li>bbbbbb</li> 22 <li>ccccccc</li> 23 <li>ddddddd</li> 24 </ul> 25 </body> 26 </html>
运行效果：
2）兄弟节点
--有兼容性问题
--nextSibling、nextElementSibling---
--previousSibling、previousElementSibling--
代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script> 7 window.onload = function (){ 8 9 oLi = document.getElementById('li1'); 10 //oLi.previousSibling.style.background = 'blue'; //有兼容性问题 11 oLi.previousElementSibling.style.background = 'blue'; 12 } 13 </script> 14 </head> 15 16 <body> 17 <ul id="ul1"> 18 <li>aaaaaa</li> 19 <li id="li1">bbbbbb</li> 20 <li>ccccccc</li> 21 <li>ddddddd</li> 22 </ul> 23 </body> 24 </html>
运行效果：
aaaaa