nextSibling、previousSibling 和 nextElementSibling、previousElementSibling

最新推荐文章于 2025-06-24 13:44:01 发布
最新推荐文章于 2025-06-24 13:44:01 发布
阅读量985 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： DOM 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39571197/article/details/85849105
本文深入解析了DOM中节点之间的关系，区分了nextSibling与nextElementSibling，previousSibling与previousElementSibling的不同，帮助读者理解不同类型的节点关系。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

nodeType，主要与这个有关 

 

nextSibling、previousSibling 可以说是所有节点；

nextElementSibling、previousElementSibling 就是普通的元素节点。 

 

DOM中的兄弟节点
安静的对折的专栏
09-18 1909
nextSibling、previousSibling 获取下一个、上一个兄弟节点，谷歌火狐浏览器获取的文本节点，而IE8及之前的浏览器会忽略文本节点，获取的是下一个、上一个标签节点   nextElementSibling、previousSibling 获取下一个、上一个兄弟节点，谷歌火狐浏览器获取的是下一个、上一个标签节点，忽略文本节点，但是IE8及之前的浏览器不支持使用
原生JS之lastChild和lastElementChild、childNodes和children区别
骆小胖~
12-22 6318
（1）原生JS遍历时操作如下 childNodes 获取所有子节点（包括包括文本节点、注释节点即回车、换行、空格、文本等等） firstChild 获取第一个子节点（可以为注释节点） lastChild 获取最后一个子节点（与firstChild类似） parentNode 返回给定节点的父级节点 nextSibling 返回给定节点的下一个节点 previousSibling 返回给定节点的上一个节点 注意：上面写法是IE8之前旧版本写法，也可以在I
previousElementSibling还是previousSibling？
03-20
NULL 博文链接：https://rmn190.iteye.com/blog/760517
nextSibling和previousSibling
a3391111的博客
04-19 320
　　在FireFox中包含众多空格作为文本节点，因此在我们使用nextSibling和previousSibling时就会出现问题。因为FireFox会把文本节点误当做元素节点的兄弟节点来处理。我们可以添加nodeType来判断。当上一节点或者是下一节点为文本节点时，就继续寻找，直到找到下一个元素节点。以下代码仅供参考，在fireFox中测试通过： 　　　　　　　　//下一个兄弟节...
dom属性 previousElementSibling
最新发布
weixin_45825917的博客
06-24 204
因为我们通常不知道 DOM 结构是否有空格、换行、注释等干扰节点，所以要确保我们获取的是 真正的元素 节点，用 previousElementSibling 是最保险的方式。previousSibling 前一个任意类型节点（可能是文本） ❌ 不忽略。previousElementSibling 前一个元素节点 ✅ 忽略。当前元素的前一个兄弟元素节点（忽略文本、注释等非元素节点）。nextElementSibling 后一个元素节点 ✅。属性 含义 是否忽略空白/注释节点。
nextSibling 和nextElementSibling
热门推荐
qq1169091731的博客
11-05 1万+
nextSibling 和nextElementSibling的区别DOM 使用nextSibling属性返回指定节点之后的下一个兄弟节点，（即：相同节点树层中的下一个节点）。nextSibling属性与nextElementSibling属性的差别： nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）； nextElementSiblin
nextElementSibling 属性
hw的博客
11-03 2894
nextElementSibling 返回当前元素在其父元素的子元素节点中的后一个元素节点,如果该元素已经是最后一个元素节点,则返回null,该属性是只读的.
nextElementSibiling和nextSibiling
2301_80448468的博客
05-23 731
在JavaScript中，特别是当处理DOM（文档对象模型）时，和是两个常见的属性，但它们的用途和行为有所不同。
js 的nextSibling
06-18
根据引用[4]中的说明，还有类似的属性：previousSibling（上一个兄弟节点）、previousElementSibling（上一个兄弟元素节点）、firstChild（第一个子节点）、firstElementChild（第一个元素子节点）等。希望以上解释...
DOM节点中元素节点与文本节点操作方法.pdf
12-16
例如，`previousSibling`和`nextSibling`可以找到当前节点的相邻兄弟节点，而`previousElementSibling`和`nextElementSibling`则只考虑元素节点，忽略文本节点和其他非元素节点。```html<div id="container"> 文本...
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
10-16
- 兄弟节点：使用 `nextSibling` 和 `previousSibling`（IE特有）或者 `nextElementSibling` 和 `previousElementSibling`（标准兼容）来获取。 - 孩子节点：使用 `firstChild`, `lastChild`（IE特有）或 `...
previousElementSibling ,previousSibling,nextElementSibling ,nextSibling 查找兄弟节点
antelope_2014的博客
04-20 494
previousElementSibling ,previousSibling,nextElementSibling ,nextSibling 查找兄弟节点 previousElementSibling ,previousSibling查找本节点的上一个兄弟节点 nextElementSibling ,nextSibling 查找本节点的下一个兄弟节点 var pre=e...
31. Element previousSibling 属性
enlyhua的专栏
08-06 813
实例返回列表项的 previousSibling（前一个同胞节点）：document.getElementById("item2").previousSibling;<!DOCTYPE html> <html> <body><p>列表示例：</p> <ul id="myList"><li id="item1">Coffee</li><li id="item2">Tea</li></ul><p id=
nextSibling,nextElementSibling的区别；
sunlizhen的专栏
06-18 1212
html文档如下： div id="box"> ul id="ul"> li>第一个li> li id="one">第二个li> li>第三个li> ul> p>我是第二个子节点p> div> nextSibling：下一个兄弟节点（包括文本节点，元素节点，注释节点）； var one = documen
previousSibling、previousElementSibling的区别
sunlizhen的专栏
06-18 1万+
previousSibling：获取元素的上一个兄弟节点；（既包含元素节点、文本节点、注释节点） div id="box"> ul id="ul"> li>第一个li> li id="one">第二个li> li>第三个li> ul> p>我是第二个子节点p> div> var one = docume
nextSibling和nextElementSibling的区别
weixin_42632642的博客
11-04 1200
nextSibling返回其父节点的childNodes子节点列表中紧随其后的节点nextElementSibling返回的则是其父节点的childNodes子节点列表中紧随其后的元素节点previousSibling和previousElementSibling类似 DOM 节点 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 1. 整个文档是一个文档节点，节点类型：9 2. 每个 HTML 元素是元素节点，节点类型：1 3. HTML 元素内的文本是文本节点，节点类型：
JS DOM 获取兄弟节点 previousSibling previousElementSibling nextSibling nextElementSibling - Kaiqisan
Kaiqisan的博客
08-17 712
JS DOM previousSibling previousElementSibling nextSibling nextElementSibling ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 这一次脱离父子关系，讲讲兄弟关系（杠精：为什么不是姐妹，气抖冷！…(略1000字)） previousSibling ：获取它的上一个兄弟节点的信息，如果没有的话就返回null previousElementSibling: 获取它的上一个(非文本节点非注释节点的)兄弟节点的信息，
dom03表单验证及nextElementSibling进行兼容性处理
JunXian的博客
03-15 941
表单验证
previousElementSibling的使用
zheng19921992的博客
03-13 2872
在项目中有一个非空验证，可以利用previousElementSibling；previousElementSibling指的是上一个兄弟元素节点；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值