nextSibling和nextElementSibling的区别

最新推荐文章于 2024-05-23 21:34:36 发布
最新推荐文章于 2024-05-23 21:34:36 发布
阅读量2.2k 收藏
点赞数
分类专栏： JS/jQuery 文章标签： DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Randy_Shenyp/article/details/71172762
版权
本文介绍了HTML DOM标准下各种类型的节点，包括文档节点、元素节点、文本节点、属性节点和注释节点，并详细解释了如何使用nextSibling、nextElementSibling、previousSibling和previousElementSibling来操作这些节点。

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

nextSibling返回其父节点的childNodes子节点列表中紧随其后的节点
nextElementSibling返回的则是其父节点的childNodes子节点列表中紧随其后的元素节点
previousSibling和previousElementSibling类似

DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
1. 整个文档是一个文档节点，节点类型：9
2. 每个 HTML 元素是元素节点，节点类型：1
3. HTML 元素内的文本是文本节点，节点类型：3
4. 每个 HTML 属性是属性节点，节点类型：2
5. 注释是注释节点，节点类型：8

所以我们在使用nextSibling时获取到的节点有可能是个文本节点，如空白符，回车等

JS中的DOM查询（2）,(parentNode、previousSibling、nextSibling)
Fantasc的博客
08-02 1313
获取父节点和兄弟节点· 通过具体的节点，调用以下三个属性来对父节点和兄弟节点进行操作。 parentNode属性，获取当前节点的父节点。 previousSibling属性，获取当前节点的前一个兄弟节点。 在用previousSibling属性去元素节点的前一个兄弟节点时，如果前一个节点是空白文本，会将空白文本节点返回，而不是放回兄弟节点。可以用previousElementSibling属性来代替，用previousElementSibling属性不会将空白文本当做兄弟节点返回。但是后者不支持ie8一
previousElementSibling还是previousSibling？
03-20
NULL 博文链接：https://rmn190.iteye.com/blog/760517
nextSibling 和nextElementSibling
热门推荐
qq1169091731的博客
11-05 1万+
nextSibling 和nextElementSibling的区别DOM 使用nextSibling属性返回指定节点之后的下一个兄弟节点，（即：相同节点树层中的下一个节点）。nextSibling属性与nextElementSibling属性的差别： nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）； nextElementSiblin
nextElementSibiling和nextSibiling
最新发布
2301_80448468的博客
05-23 656
在JavaScript中，特别是当处理DOM（文档对象模型）时，和是两个常见的属性，但它们的用途和行为有所不同。
nextSibling和nextElementSilbing使用以及解决兼容性问题
cccccl的博客
03-03 1800
nextSibling和nextElementSilbing使用以及解决兼容性问题 1、今天学习了 获取兄弟节点 的方法 – nextSibling（获取下一个兄弟节点）、previousSibling(获取上一个兄弟节点) Node.nextSibling 是一个只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。 <body> <div>啦啦啦</div> <div>我是
nextSibling
12-07
家庭保姆的场景与此技术关联较小，但可以想象，如果一个智能家庭管理系统使用了JavaScript来控制家中的各种设备，那么`nextSibling`这样的DOM操作可能就用在了识别和操作家庭设备的逻辑中，例如切换灯泡或调整温度...
javascript中的nextSibling使用陷(da)阱(keng)
10-25
在JavaScript中，DOM树的节点关系和遍历是开发者经常会使用到的功能，而`nextSibling`属性则是其中经常使用到的属性之一。`nextSibling`属性会返回指定节点的下一个兄弟节点。不过，它的行为在不同浏览器中存在一些...
nextelementsibling用法
09-27
var nextSibling = firstChild.nextElementSibling; console.log(nextSibling.innerHTML); // 输出"元素2" ``` 在上面的代码中，我们首先通过`getElementById`方法获取了`id`为`parent`的`div`元素，然后使用`...
nextSibling与nextElementSibling区别
觅_的博客
06-05 2584
nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）； nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）； 在 HTML DOM （文档对象模型）中，每个部分都是节点： 文档本身是文档节点 所有 HTML 元素是元素节点 所有 HTML 属性是属性节点 HTML 元素内的文本是文本节...
HTML DOM element.nextElementSibling属性
qq_38384536的博客
06-08 4069
HTML DOM element.nextElementSibling属性; 返回指定元素之后的下一个兄弟元素 使用nextElementSibling属性返回指定元素之后的下一个兄弟元素，（即：相同节点树层中的下一个元素节点）。 nextSibling属性与nextElementSibling属性的差别： nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释
JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling
a2273490的博客
11-12 463
<body> <ul id="ul1"> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> </ul&g...
nextElementSibling 属性
hw的博客
11-03 2874
nextElementSibling 返回当前元素在其父元素的子元素节点中的后一个元素节点,如果该元素已经是最后一个元素节点,则返回null,该属性是只读的.
【前端 HTML+CSS+JavaScript(JS)】DOM练习-购物车的实现 ~ElementSibling parentElement children 事件的绑定与带注释/总结
cc2855816075的博客
02-17 1248
效果： 总结： 1、event.target和this似乎一致，自行查阅。 2、绑定事件方法：在带有括号（需要传参）时，一定要在外面带上引号，因为不加引号的话意为直接调用函数。 <input type="button" value="-" onclick="sub(event)" class="subBtns"> 3、css中的类属性为class，在js中设置dom元素的class要使用className，其他的例如border-color要改为驼峰规则borderColor。 4、事件的绑
HTML DOM nextSibling 和nextElementSibling属性
qq_42164670的博客
07-30 1953
nextSibling 和nextElementSibling的区别 nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）； nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）； 定义和用法 nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。 被返回的节点以 Node 对象返回。、 注释：如...
DOM节点操作
weixin_67642008的博客
06-27 202
DOM节点-父节点-子节点-兄弟节点-ie兼容性问题
2021-09-18
qq_45855725的博客
09-18 248
nextElementSibling 和 nextSibling 的区别 nextElementSibling 和 nextSibling 都是返回当前结点的下一个兄弟结点，但nextSibling 返回的兄弟结点包括了你js 源代码中的回车，换行，空格，文本等，而nextElementSibling 只返回当前元素结点之后的、不包括上述文本结点的兄弟结点。 <body> <form action="" method="get"> <table align="center
nextSibling和perviousSibling踩过的一些坑
qq_19313497的博客
04-07 979
目录菜鸟教程上对nextSibling、nextElementSibling、previousSibling、previousElementSibling的定义新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的Ka...
php选择元素,选择元素
weixin_39902085的博客
03-11 99
使用DOMDOM中的每个元素都有一组属性和方法，它们提供有关它们在DOM中的关系的信息：element.childNodes返回一个元素的子节点的数组。element.firstChild返回元素的第一个子节点。element.lastChild返回元素的最后一个子节点。element.hasChildNodes如果元素有任何子节点，则返回 true，否则为 false 。element....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值