js的 nextsibling 和previousSibling

最新推荐文章于 2024-01-03 08:30:00 发布

原创最新推荐文章于 2024-01-03 08:30:00 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文解析了JavaScript中通过nextSibling和previousSibling获取的不同类型的节点，包括元素节点、属性节点及文本节点，并解释了为何获取空格时会出现文本节点。

二者获取的是节点

而节点在js中有三种

元素节点

属性节点

文本节点

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

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

为什么？

因为空格算是文本节点。

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

nextElementSibling则可以获取元素节点！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Undefineddd

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript【Text 节点、Node 节点属性（nodeName、nodeValue 、textContent、nextSibling、previousSibling）】(十二)

08-07

1562

JavaScript【Text 节点、Node 节点属性（nodeName、nodeValue 、textContent、nextSibling、previousSibling）】(十二)

nextSibling

12-07

在实际开发中，`nextSibling`常与`previousSibling`一起使用，它们可以方便地遍历和操作DOM树中的元素。另外，如果需要更精确地选择下一个同级元素，可以使用`nextElementSibling`属性，它只返回下一个元素节点，跳...

参与评论您还未登录，请先登录后发表或查看评论

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

583

返回当前节点的下一个同级节点

js的nextSibling

weizuqing的专栏

01-13

432

nextSilbling 属性的作用是：直接返回一个节点之后的节点（其后的节点与当前节点同属一个级别）。如果不包含这类节点，那么属性将返回null[空值]。IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样。知道了吧，FF会把诸如空格换行之类的排版元素视作节点读取，faint～··· 发现FF BT的地放还有对event的处理～···相当麻烦～···nextSibli...

js nextSibling函数

liangdingguo的博客

02-20

1112

<!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操作属性，它们用于访问节点树中的下一个和上一个兄弟节点。这两个属性看起来简单直观，但在实际开发中，由于浏览器之间的差异，它们的用法可能会变得...

javascript nextSibling属性

苦艾文艺

06-07

1304

对于nextSibling属性，在W3school中的定义为： nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。注意所返回的节点必须是与上一个节点是同级关系，且彼此之间不能有空格，否则将会返回：undefined<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titl

js：nextSibling兄弟节点的使用

diancheng5132的博客

12-19

586

一，使用nextSibling可以方便的找到该节点的兄弟节点，并为其设置属性 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/...

原生js中nextSibling和nextElementSibling的坑

码赛客1024的博客

04-29

2682

作者：拓海老师，公众号：拓海老师一直以来js的随性让初学者蛋疼菊紧，但是真正玩熟了之后，还是非常有意思的！今天拓海老师跟大家说一下原生js中获取元素的下一个直接兄弟元素的坑！业务场景：点击当前元素，让其下一个紧挨着的兄弟元素展现出来，类似自定义下拉菜单。如下，点击div，让ul展现出来，此时就要用到一个dom操作nextSibling获取下一个元素。 <!doctype html&...

js中juqery的siblings()方法应用

weixin_30387339的博客

07-21

368

$(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

423

要搜索"input"元素前的一个元素，用到了previousSibling，然后要在这个input元素前加进另一个元素，为了继续找到前面那个元素，就用了两次previousSibing。之前看过一个帖子，有个伙计用了十几个pS元素，脑洞大开。分享到这里。 ...

js previousSibling兼容使用方法

weixin_30632899的博客

06-23

340

使用previousSibling的时候发现当前元素跟上一个元素之间有空格就不获取不到对象，查资料才知道除了ie外js的previousSibling获取的对象包括空格！兼容方法如下： function get_previoussibling(n) { var x=n.previousSibling; if(x == null) re...

jQuery方法原生js实现 --- siblings兄弟节点

wujimiao的专栏

09-27

4153

今天工作失误，导致移动端浏览器无法工作，初步估计是es6未经过编译便进入项目。经验欠缺，吃一堑长一智吧。工作中用到兄弟节点的地方不算太多，或许选项卡，轮播图会用到。为了对jQuery进一步深入，特意研究一下siblings()方法。 1 2 3 4 5 11 siblings = (o)=>{ let arr

nextsibling方法用法

微赚淘客开发者博客

01-03

1182

在DOM（文档对象模型）中，是JavaScript提供的一种用于访问下一个同级节点（sibling）的方法。这个方法返回下一个同级节点，包括文本节点、元素节点等。方法是DOM中常用的节点遍历方法之一，它能够在同级节点中灵活定位和操作元素，为前端开发提供了便利。通过学习和理解的使用方法，我们可以更加高效地处理DOM操作，提升开发效率。

js 的nextSibling