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

向右看齐 2021-11-29 12:20 310阅读 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>

由此可见，第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

发表评论取消回复

表情：

评论列表（有 0 条评论，310人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS获取子节点、父节点和兄弟节点的方法实例总结

1.js获取子节点的方式 1.通过获取dom方式直接获取子节点 var a = document.getElementById("test").getEle

太过爱你忘了你带给我的痛/ 2023年10月11日 14:01/ 0 赞/ 22 阅读

相关 vue获取节点的父节点、兄弟节点、子节点

<span @click="getClickInfo(event)"> </span> getClickInfo: function (e)

红太狼/ 2023年06月06日 12:04/ 0 赞/ 26 阅读

相关 JavaScript（js)节点--父节点、子节点、兄弟节点

JavaScript（js)节点–父节点子节点一般节点至少拥有nodeType（结点类型），nodeName（节点名称）和nodeValue(节点值)这三个基本属性。

╰半橙微兮°/ 2022年12月22日 09:59/ 0 赞/ 260 阅读

相关 19、DOM--首尾子节点,兄弟节点的兼容性问题

1、 DOM节点 .首尾子节点 - firstChild (IE) firstElementChild (火狐,谷歌) - la

亦凉/ 2022年08月23日 00:46/ 0 赞/ 138 阅读

相关 JQUERY的父，子，兄弟节点查找方法

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")

我不是女神ヾ/ 2022年08月21日 15:59/ 0 赞/ 187 阅读

相关【jquery】删除节点添加节点找兄弟节点

一些简单的内容, 加深印象记录下来： $().empty(); //该方法会删除当前节点下的所有子节点，请注意当前节点不会被删除 $

迈不过友情╰/ 2022年08月13日 12:54/ 0 赞/ 348 阅读

相关 js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test"); 　　var paren

た入场券/ 2022年06月17日 04:48/ 0 赞/ 460 阅读

相关 js、jquery 获取父节点、子节点、兄弟节点

一 js 获取父节点,子节点,兄弟节点 var test = document.getElementById("test"); var parent =

缺乏、安全感/ 2022年03月19日 14:34/ 0 赞/ 454 阅读

相关【JavaScript & jQuery】获取元素各个节点 (父节点,子节点,兄弟节点),元素筛选

![在这里插入图片描述][20190428142233854.png] JavaScript原生版： var test = document.getElementB

- 日理万妓/ 2022年02月20日 03:41/ 0 赞/ 354 阅读

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

（一）首尾子节点：【首】：firstChild、 firstElementChild 【尾】：lastChild、 lastElementChild （首尾两个子节点，

向右看齐/ 2021年11月29日 12:20/ 0 赞/ 311 阅读