JavaScript-DOM(2)

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

posted @ 2017-05-16 15:16  fly-time  阅读(116)  评论(0编辑  收藏  举报