nextSibling 和nextElementSibling的区别

最新推荐文章于 2025-05-13 18:18:10 发布

yanjun821126

最新推荐文章于 2025-05-13 18:18:10 发布

阅读量2w

点赞数 7

分类专栏： js

js 专栏收录该内容

13 篇文章

订阅专栏

本文详细解析了DOM中nextSibling与nextElementSibling属性的区别及其应用场景。通过具体案例说明如何使用这两个属性来定位DOM树中的元素，特别关注了在实际编程中容易忽略的细节，如空格和换行符对元素定位的影响。

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

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

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

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

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

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

解决方法1：去掉中间多余的内容，input的nextSibling就是font结点

解决办法2：用input 的nextElementSibling 方法，得到的就是font结点

<center>
<table>
<tr>
<td><input type="button" value="-" id="c1" οnclick="a(this)"/></td>
<td><span>1</span></td>
<td><input type="button" value="+" id="c2" οnclick="s(this)"/></td>
</tr>
</table>
</center>
<script type="text/javascript">
function a(obj){
var x = obj.parentNode.nextElementSibling;
var x1 = x.getElementsByTagName('span')[0];
if(parseInt(x1.innerHTML) > 0){
x1.innerHTML = parseInt(x1.innerHTML)-1;
}
}
function s(obj){
var x = obj.parentNode.previousElementSibling;
console.log(x);
var x1 = x.getElementsByTagName('span')[0];
x1.innerHTML = parseInt(x1.innerHTML)+1;
}
</script>