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

最新推荐文章于 2022-02-09 11:27:58 发布

weixin_30263277

最新推荐文章于 2022-02-09 11:27:58 发布

阅读量540

点赞数

原文链接：http://www.cnblogs.com/ytraister/p/10934080.html

版权

（一）首尾子节点：

【首】：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>

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

同样地！

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

//解决方法如下：

var iResult2=oLi.previousElementSibling || oLi.previousSibling ; 　　

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

iResult2.style.background='blue'

转载于:https://www.cnblogs.com/ytraister/p/10934080.html

weixin_30263277

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS——DOM操作（首尾子节点、兄弟节点【firstChild、previousSibling...】）

（一）首尾子节点：【首】：firstChild、 firstElementChild【尾】：lastChild、 lastElementChild（首尾两个子节点，有两种写法，主要是因为兼容性问题）详情看以下代码：　　（lastChild、 lastElementChild与之相同） 1 <!DOCTYPE html> 2 <html la...
复制链接

扫一扫