nextSibling和nextElementSibling的区别

最新推荐文章于 2022-09-04 00:04:59 发布
最新推荐文章于 2022-09-04 00:04:59 发布
阅读量2.1k 收藏
点赞数
分类专栏： JS/jQuery 文章标签： DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Randy_Shenyp/article/details/71172762
版权

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时获取到的节点有可能是个文本节点，如空白符，回车等

_FEE
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js中nextSibling和nextElementSibling的坑
码赛客1024的博客
04-29 2488
作者：拓海老师，公众号：拓海老师 一直以来js的随性让初学者蛋疼菊紧，但是真正玩熟了之后，还是非常有意思的！ 今天拓海老师跟大家说一下原生js中获取元素的下一个直接兄弟元素的坑！ 业务场景：点击当前元素，让其下一个紧挨着的兄弟元素展现出来，类似自定义下拉菜单。如下，点击div，让ul展现出来，此时就要用到一个dom操作nextSibling获取下一个元素。 <!doctype html&...
parentNode，children，nextSibling，previousSibling常用属性对比
图图小淘气的博客
06-17 1569
nextSibling： 返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）； 注意: 空格、回车也会看作文本，以文本节点对待。 nextElementSibling： 属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）； previousSibling： 获取元素的上一个兄弟节点；（既包含元素节点、文本节点、注释节点） previousElementSibling： 获取上一个兄弟元素节点；（只包含元素节点）； childNodes： 返回当..
JavaScript中DOM的使用（下）
qq_52273362的博客
09-04 208
JavaScript中DOM的使用
nextSibling和nextElementSilbing使用以及解决兼容性问题
cccccl的博客
03-03 1521
nextSibling和nextElementSilbing使用以及解决兼容性问题 1、今天学习了 获取兄弟节点 的方法 – nextSibling（获取下一个兄弟节点）、previousSibling(获取上一个兄弟节点) Node.nextSibling 是一个只读属性，返回其父节点的 childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 null。 <body> <div>啦啦啦</div> <div>我是
nextSibling
12-07
家庭保姆的场景与此技术关联较小，但可以想象，如果一个智能家庭管理系统使用了JavaScript来控制家中的各种设备，那么`nextSibling`这样的DOM操作可能就用在了识别和操作家庭设备的逻辑中，例如切换灯泡或调整温度...
javascript中的nextSibling使用陷(da)阱(keng)
12-10
后来我发现有个nextElementSibling方法…… 这个不会返回文本节点，不管是什么浏览器…… 真是大坑 同样，对于fistChild有对应的firstElementChild。其他的选择节点的函数应该也有对应的Element方法，不过还没试过...
Js中节点的遍历和操作
11-22
- `nextSibling`：获取当前节点的下一个兄弟节点。 - `previousSibling`：获取当前节点的上一个兄弟节点。 - `firstElementChild`：仅返回节点的第一个元素子节点，忽略文本节点。 - `lastElementChild`：仅返回...
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
10-16
- 兄弟节点：使用 `nextSibling` 和 `previousSibling`（IE特有）或者 `nextElementSibling` 和 `previousElementSibling`（标准兼容）来获取。 - 孩子节点：使用 `firstChild`, `lastChild`（IE特有）或 `...
谈谈JS中常遇到的浏览器兼容问题和解决方法
10-20
例如，获取元素的相邻兄弟节点，现代浏览器提供了`nextElementSibling`和`previousElementSibling`，但IE6、7、8不支持，需要使用`nextSibling`和`previousSibling`。类似地，获取第一个子元素节点，可以使用`...
详解DOM节点及属性API
Devin_Chen的博客
01-09 471
DOM节点 目录 DOM节点 HTML DOM 节点树 节点父、子和同胞 节点 节点类型 节点设置与获取 children 与 childNodes nextSibling 与nextElementSibling previousSibling 与 previousElementSibling firstChild 与firstElementChild last...
学习笔记12_节点操作
ankh的博客
04-13 1755
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
php选择元素,选择元素
weixin_39902085的博客
03-11 61
使用DOMDOM中的每个元素都有一组属性和方法，它们提供有关它们在DOM中的关系的信息：element.childNodes返回一个元素的子节点的数组。element.firstChild返回元素的第一个子节点。element.lastChild返回元素的最后一个子节点。element.hasChildNodes如果元素有任何子节点，则返回 true，否则为 false 。element....
js日记之节点操作
m0_53438035的博客
05-03 209
睡不着，半夜起来学习–2021年某日凌晨4：02 一：父节点 1：返回父节点 element.parentNode，得到的是离元素最近的父节点。如果找不到则返回为null 代码： <body> <div class="g"> <div class="f"> <div class="s"></div> </div> </div> <scrip
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
【前端 HTML+CSS+JavaScript(JS)】DOM练习-购物车的实现 ~ElementSibling parentElement children 事件的绑定与带注释/总结
cc2855816075的博客
02-17 1205
效果： 总结： 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、事件的绑
不同浏览器中nextSibling方法注意事项
piziliweiguang的专栏
06-24 1633
在IE和FireFox浏览器中,DOM的nextSibling方法的使用存在部分差异: 1. 在FireFox中,html标记中空行和换行会被当做节点来处理,所以会出现startNode.nextSibling取不到目标节点的情况,得到的元素反而是undefined或是nodeType为text的节点; 2.解决方法是:判断startNode.nextSibling的nodeType类型:
JS，nextSibling,nextElementSibling 下一个兄弟,previousSibling previousElementSibling 上一个兄弟节点
sunling的专栏
11-21 1万+
234 234 234 234 234 234 234 234 var div1 = document.getElementById("div1"); // div1.nextSibling.style.color="red";  获取下一个兄弟节点 只有IE 6 7 8兼容 // div1.nextElementSibling.style.color="red";   其
nextSibling,nextElementSibling的区别；
sunlizhen的专栏
06-18 1129
html文档如下： div id="box"> ul id="ul"> li>第一个li> li id="one">第二个li> li>第三个li> ul> p>我是第二个子节点p> div> nextSibling：下一个兄弟节点（包括文本节点，元素节点，注释节点）； var one = documen
nextelementsibling用法
最新发布
09-27
### 回答1： nextElementSibling是一个DOM属性，用于获取当前元素的下一个兄弟元素节点。它返回的是一个元素节点对象，如果没有下一个兄弟元素节点，则返回null。使用该属性可以方便地遍历DOM树中的兄弟元素节点。 ### 回答2： nextElementSibling 是一个DOM元素属性，用于获取当前元素的下一个兄弟元素。 在HTML中，兄弟元素指的是与当前元素具有相同的父元素的其他元素。nextElementSibling可以帮助我们找到当前元素的紧邻的下一个兄弟元素。 例如，假设有一个HTML结构如下： ```html <div id="parent"> <div>元素1</div> <div>元素2</div> <div>元素3</div> <div>元素4</div> <div>元素5</div> </div> ``` 我们可以使用JavaScript来获取`id`为`parent`的`div`元素的第一个子元素的下一个兄弟元素，代码如下： ```javascript var parentDiv = document.getElementById("parent"); var firstChild = parentDiv.firstElementChild; var nextSibling = firstChild.nextElementSibling; console.log(nextSibling.innerHTML); // 输出"元素2" ``` 在上面的代码中，我们首先通过`getElementById`方法获取了`id`为`parent`的`div`元素，然后使用`firstElementChild`属性获取该元素的第一个子元素，即`元素1`。最后，通过`nextElementSibling`属性获取了`元素1`的下一个兄弟元素，即`元素2`。 需要注意的是，`nextElementSibling`只会返回下一个元素，如果没有下一个兄弟元素，则返回`null`。并且，与`nextSibling`不同，`nextElementSibling`只会返回元素节点，而不会返回其它类型的节点（如文本节点）。 ### 回答3： nextElementSibling 是JavaScript中的一个属性，它用于获取当前节点的下一个兄弟节点。 具体用法是在一个DOM节点对象上调用该属性，返回的是该节点的下一个与它同级的兄弟节点。如果没有下一个兄弟节点，则返回null。 通常，要使用 nextElementSibling 属性，我们需要首先获取到一个DOM节点的引用。下面是一个例子： ``` <!DOCTYPE html> <html> <body> <div id="myDiv1">第一个兄弟节点</div> <div id="myDiv2">第二个兄弟节点</div> <div id="myDiv3">第三个兄弟节点</div> <script> var firstDiv = document.getElementById("myDiv1"); var secondDiv = firstDiv.nextElementSibling; console.log(secondDiv.id); // 输出 "myDiv2" </script> </body> </html> ``` 在上面的例子中，我们通过使用 getElementById() 方法获取到 id 为 myDiv1 的 div 节点，并将它赋值给 firstDiv 变量。然后，我们通过调用 firstDiv.nextElementSibling 获得了该节点的下一个兄弟节点，并将结果赋值给 secondDiv 变量。最后，我们打印了 secondDiv 的 id 属性，输出为 "myDiv2"，即第一个兄弟节点的下一个兄弟节点的id。 需要注意的是，nextElementSibling 只会获取到元素节点，而不是文本节点或注释节点。如果要获取下一个兄弟节点，无论是元素节点还是文本节点，可以使用 nextSibling 属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值