js的 nextsibling 和previousSibling

最新推荐文章于 2024-01-03 08:30:00 发布
最新推荐文章于 2024-01-03 08:30:00 发布
阅读量1.7k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Undefineddd/article/details/71308306
本文解析了JavaScript中通过nextSibling和previousSibling获取的不同类型的节点，包括元素节点、属性节点及文本节点，并解释了为何获取空格时会出现文本节点。

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

 二者获取的是节点

而节点在js中有三种

元素节点

属性节点

文本节点

若两个标签之间存在空格，如<input></input> 空格 <button>

则使用该方法获取的节点会获取到文本节点

为什么？

因为空格算是文本节点。


原因是 nextsibling 和previousSibling获取的是节点！！！！

nextElementSibling则可以获取元素节点！

JavaScript【Text 节点、Node 节点属性（nodeName、nodeValue 、textContent、nextSibling、previousSibling）】(十二)
08-07 1441
JavaScript【Text 节点、Node 节点属性（nodeName、nodeValue 、textContent、nextSibling、previousSibling）】(十二)
原生js中nextSibling和nextElementSibling的坑
码赛客1024的博客
04-29 2639
作者：拓海老师，公众号：拓海老师 一直以来js的随性让初学者蛋疼菊紧，但是真正玩熟了之后，还是非常有意思的！ 今天拓海老师跟大家说一下原生js中获取元素的下一个直接兄弟元素的坑！ 业务场景：点击当前元素，让其下一个紧挨着的兄弟元素展现出来，类似自定义下拉菜单。如下，点击div，让ul展现出来，此时就要用到一个dom操作nextSibling获取下一个元素。 <!doctype html&...
js nextSibling属性和previousSibling属性概述及使用注意
10-27
nextSibling属性:该属性表示当前节点的下一个节点；如果其后没有与其同级的节点，则返回null;previousSibling属性:该属性与nextSibling属性的作用正好相反,接下来将详细介绍下，感兴趣的你不妨了解下哦，或许对你有所帮助
js nextSibling属性和previousSibling属性
Sux
04-30 2万+
js nextSibling属性和previousSibling属性            1：nextSibling属性        该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。       需要特别注意的是：该属性在不同的浏览器中的执行结果并不都相同，见下面例示：      先来看
js的nextSibling属性
q285661571的专栏
04-25 563
返回当前节点的下一个同级节点
js的nextSibling
weizuqing的专栏
01-13 412
nextSilbling 属性的作用是：直接返回一个节点之后的节点（其后的节点与当前节点同属一个级别）。如果不包含这类节点，那么属性将返回null[空值]。IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样。知道了吧，FF会把诸如空格换行之类的排版元素视作节点读取，faint～··· 发现FF BT的地放还有对event的处理～···相当麻烦～···nextSibli...
js nextSibling函数
liangdingguo的博客
02-20 1088
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> &...
javascript中的previousSibling和nextSibling的正确用法
10-23
在JavaScript中，nextSibling和previousSibling是两个常用的DOM操作属性，它们用于访问节点树中的下一个和上一个兄弟节点。这两个属性看起来简单直观，但在实际开发中，由于浏览器之间的差异，它们的用法可能会变得...
nextSibling
12-07
在实际开发中，`nextSibling`常与`previousSibling`一起使用，它们可以方便地遍历和操作DOM树中的元素。另外，如果需要更精确地选择下一个同级元素，可以使用`nextElementSibling`属性，它只返回下一个元素节点，跳...
javascript nextSibling属性
苦艾文艺
06-07 1280
对于nextSibling属性，在W3school中的定义为： nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。注意所返回的节点必须是与上一个节点是同级关系，且彼此之间不能有空格，否则将会返回：undefined<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titl
js：nextSibling兄弟节点的使用
diancheng5132的博客
12-19 570
一，使用nextSibling可以方便的找到该节点的兄弟节点，并为其设置属性 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/...
js中juqery的siblings()方法应用
weixin_30387339的博客
07-21 355
$(this).addClass("bk_sjHover").siblings().removeClass("bk_sjHover");// 设置被点击元素css样式，并去除除了本身所有同胞元素的样式 转载于:https://www.cnblogs.com/gjnsmallworld/p/7216112.html...
JavaScript中的previousSibling和nextSibling使用注意事项
04-30 3万+
JavaScript中的previousSibling和nextSibling使用注意事项 JavaScript中的previousSibling和nextSibling是获取上一个、下一个同胞元素，如果上一个或下一个同级节不存在，则此属性返回值是null。如果不注意,就会引起错误。 HTML结构中的各种空格、换行符都可...
原生JS查找相邻元素——siblings方法
热门推荐
半亩云烟
06-12 3万+
在JQuery中可以很方便地用 elem.siblings() 方法实现查找相邻元素，但在JS中并没有这样的方法，可以用previousSibling和nextSibling结合来实现。 不过在JS中用获取node的方法会有意想不到的多余的空文本，所以需要加入判断条件来判断元素类型。nodeType==1，表示是元素节点。 代码如下： function siblingElems(elem
previousSibling的用法
gongda2001202221的博客
03-31 414
要搜索"input"元素前的一个元素，用到了previousSibling，然后要在这个input元素前加进另一个元素，为了继续找到前面那个元素，就用了两次previousSibing。 之前看过一个帖子，有个伙计用了十几个pS元素，脑洞大开。分享到这里。 ...
js previousSibling兼容使用方法
weixin_30632899的博客
06-23 328
使用previousSibling的时候发现当前元素跟上一个元素之间有空格就不获取不到对象， 查资料才知道除了ie外js的previousSibling获取的对象包括空格！ 兼容方法如下： function get_previoussibling(n) { var x=n.previousSibling; if(x == null) re...
nextsibling方法用法
微赚淘客开发者博客
01-03 1109
在DOM（文档对象模型）中，是JavaScript提供的一种用于访问下一个同级节点（sibling）的方法。这个方法返回下一个同级节点，包括文本节点、元素节点等。方法是DOM中常用的节点遍历方法之一，它能够在同级节点中灵活定位和操作元素，为前端开发提供了便利。通过学习和理解的使用方法，我们可以更加高效地处理DOM操作，提升开发效率。
previousSibling用法注意
weixin_34018169的博客
03-08 570
定义和用法 previousSibling 属性返回选定节点的上一个同级节点（在相同树层级中的前一个节点）。 如果不存在这样的节点，则该属性返回 null。 注意： var y=get_previoussibling(x); 代码实例中前面加上了（get_） 语法： elementNode.previousSibling 实例 在所有的例子中，我们将使用 XML ...
js 的nextSibling
最新发布
06-18
我们正在讨论JavaScript中的nextSibling属性。根据引用[4]和引用[5]，nextSibling是DOM节点的一个属性，它返回当前节点的下一个兄弟节点（包括文本节点、注释节点等任何类型的节点）。如果当前节点是最后一个子节点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值