JS——DOM操作（首尾子节点、兄弟节点【firstChild、previousSibling...】）-蒲公英云

JS——DOM操作（首尾子节点、兄弟节点【firstChild、previousSibling...】）

向右看齐 2021-11-29 12:20 409阅读 0赞

（一）首尾子节点：

【首】：firstChild、 firstElementChild

【尾】：lastChild、 lastElementChild

（首尾两个子节点，有两种写法，主要是因为兼容性问题）

详情看以下代码：　　（lastChild、 lastElementChild与之相同）

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>     
 8     <script>
 9         window.onload=function(){
10             var oUl=document.getElementById('ul');
11             //首尾子节点，存在兼容性问题
12 
13             oUl.firstChild.style.background='red'           //在ie9以下的浏览器得以实现效果，ie9以上浏览器不兼容
14 
15             oUl.firstElementChild.style.background='red'    //在ie9以上浏览器得以兼容，chrome，ff等
16         }
17     </script>
18 </head>
19 <body>
20     <ul id="ul">
21         <li></li>
22         <li></li>
23         <li></li>
24         <li></li>
25     </ul>
26 </html>

由此可见，第13行代码：firstChild会在ie9以下的版本中得以实现；而第15行代码：firstElementChild会在ie9以上的版本中得以实现

但是！

如何解决以上问题？使得浏览器具有兼容性！！！

//解决方法如下：

var iResult1=oUl.firstElementChild || oUl.firstChild; 　　

//声明一个iResult1变量，让浏览器自行判断选择的DOM操作对象

iResult1.style.background=’blue’

（二）兄弟节点：

【前】：previousSibling、 previousElementSibling

【后】：nextSibling、　　nextElementSibling

（兄弟两个子节点，也有两种写法，主要是也因为兼容性问题）

详情看以下代码：　　（nextSibling、 nextElementSibling与之相同）

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>     
 8     <script>
 9         window.onload=function(){
10             var oLi=document.getElementById('li');
11             //兄弟节点，存在兼容性问题
12 
13             oLi.previousSibling.style.background='red'           //在ie9以下的浏览器得以实现效果，ie9以上浏览器不兼容
14 
15             oLi.previousElementSibling.style.background='red'    //在ie9以上浏览器得以兼容，chrome，ff等
16         }
17     </script>
18 </head>
19 <body>
20     <ul id="ul">
21         <li></li>
22         <li id="li">xxx</li>
23         <li></li>
24         <li></li>
25     </ul>
26 </html>