【踩坑】nextSibling 和nextElementSibling的区别

DOM

使用nextSibling属性返回指定节点之后的下一个兄弟节点，（即：相同节点树层中的下一个节点）。

nextSibling属性与nextElementSibling属性的差别：
nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）；
nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；

注意: 空格、回车也会看作文本，以文本节点对待。
下例中，如果两个li元素之间有空格、回车，将返回 “undefined”。

今天犯了个很蛋疼的错误，调试了半天，才发现在input 与font 标签之间多了个回车。（中间不应有任何内容，包括，回车，换行）

<input type="text" name="username" οnblur="checkName();" /><font></font>

解决方法1：去掉中间多余的内容，input的nextSibling就是font结点
解决办法2：用input 的nextElementSibling 方法，得到的就是font结点

转载于:https://www.cnblogs.com/webcabana/p/7273534.html

【踩坑】nextSibling 和nextElementSibling的区别相关推荐

nextSibling和nextElementSibling的区别
nextSibling返回其父节点的childNodes子节点列表中紧随其后的节点 nextElementSibling返回的则是其父节点的childNodes子节点列表中紧随其后的元素节点 prev ...
nextSibling 和nextElementSibling的区别
使用nextSibling属性返回指定节点之后的下一个兄弟节点,(即:相同节点树层中的下一个节点). nextSibling属性与nextElementSibling属性的差别: nextSibli ...
HTML DOM nextSibling 和nextElementSibling属性
nextSibling 和nextElementSibling的区别 nextSibling属性返回元素节点之后的兄弟节点(包括文本节点.注释节点): nextElementSibling属性只返回元 ...
nextSibling 和nextElementSibling
#nextSibling 和nextElementSibling的区别 DOM 使用nextSibling属性返回指定节点之后的下一个兄弟节点,(即:相同节点树层中的下一个节点). nextSibli ...
新手入门吉他怎么选？单板吉他和合板吉他的区别？2022年初学者吉他品牌不踩坑推荐！
1.吉他材质有哪些,怎么挑选适合的? 2.单板与合板.全单吉他的区别是什么? 3.吉他的桶型和尺寸怎么选? 4.新手入门吉他品牌推荐! 相信新手在选琴方面都会遇到很多疑问,看完这篇文章介绍之后就会知道 ...
nextSibling,nextElementSibling的区别；
html文档如下: <div id="box"><ul id="ul"><li>第一个</li><li i ...
java调用clang编译的so_写Java这么久，JDK源码编译过没？编译JDK源码踩坑纪实
好奇害死羊很多小伙伴们做Java开发,天天写Java代码,肯定离不开Java基础环境:JDK,毕竟我们写好的Java代码也是跑在JVM虚拟机上. 一般来说,我们学Java之前,第一步就是安装JDK环 ...
分布式深度学习最佳入门（踩坑）指南
点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达作者丨Lyon@知乎(已授权) 来源丨https://zhuanla ...
HTML常见标签易踩坑笔记（一）
最近在学习HTML的时候,遇到一些容易踩坑的点,梳理一遍,顺便把常用的标签再巩固巩固. 1.article 标签(H5新标签) (1)定义:<article>元素表示文档.页面.应用或网站 ...

【踩坑】nextSibling 和nextElementSibling的区别

【踩坑】nextSibling 和nextElementSibling的区别相关推荐

最新文章

热门文章