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

向右看齐 2021-11-29 12:20 262阅读 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 条评论，262人围观）

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

相关阅读

相关 jquery 在兄弟节点前、或兄弟节点后添加最新元素

使用 jquery 封装好的方法操作 dom，非常方便 1、在兄弟节点前添加最新元素使用 before() 方法演示代码如下 <!DOCTYPE ht

比眉伴天荒/ 2022年12月29日 06:20/ 0 赞/ 217 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 MyBatis 数据库修改操作树节点及子节点

![70][] 如上图是一个树形表结构： id：主键是parent\_id的父节点 parent\_id: id的子节点 parent\_ids:所有父节点

绝地灬酷狼/ 2022年05月27日 14:06/ 0 赞/ 229 阅读

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

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

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

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

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

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

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

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

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