当前位置：首页 > news >正文

原生js中nextSibling和nextElementSibling的坑

news 2025/6/6 9:30:25

作者：拓海老师，公众号：拓海老师

一直以来js的随性让初学者蛋疼菊紧，但是真正玩熟了之后，还是非常有意思的！

今天拓海老师跟大家说一下原生js中获取元素的下一个直接兄弟元素的坑！
业务场景：点击当前元素，让其下一个紧挨着的兄弟元素展现出来，类似自定义下拉菜单。如下，点击div，让ul展现出来，此时就要用到一个dom操作nextSibling获取下一个元素。

<!doctype html>
<html><head><meta charset="UTF-8"><title>测试</title></head><body><div onclick="show(this)">列表名</div>	<ul style="display:none;"><li>内容1</li><li>内容2</li><li>内容3</li></ul><script>function show(el){var e = el.nextSibling;console.log(e); //#text}</script></body>
</html>

但是，这里打印的结果不是 ul，而是#text，也就是文本，额没zing… 哪里来的文本？
让我来解释一波，因为整个html文档可以看做是一个dom节点树，（对于dom不理解的，私我微信tcpz0802），整个页面中节点包含了：标签，文本，空白字符[回车，换行等]，而在div和ul之间恰好敲了回车，此时调用元素的nextSibling获得的就是它。

找到了问题所在，如何解决呢？正确方式，使用nextElementSibling即可，他获取的就是Element，可以忽略文本。代码如下：

<!doctype html>
<html><head><meta charset="UTF-8"><title></title></head><body><div onclick="show(this)">列表名</div>	<ul style="display:none;"><li>内容1</li><li>内容2</li><li>内容3</li></ul><script>function show(el){var e = el.nextElementSibling;e.style.display = e.style.display=="none"?"block":"none";}</script></body>
</html>