JS DOM previousSibling previousElementSibling nextSibling nextElementSibling

ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである, 这一次脱离父子关系，讲讲兄弟关系（杠精：为什么不是姐妹，气抖冷！…(略1000字)）

小科普

sibling: 英 [ˈsɪblɪŋ] 美 [ˈsɪblɪŋ] n.兄;弟;姐;妹
（好好记住一些专门的计算机术语单词可以有助于记住方法名）

正片

previousSibling ：获取它的上一个兄弟节点的信息，如果没有的话就返回null

previousElementSibling: 获取它的上一个(非文本节点非注释节点的)兄弟节点的信息，如果没有的话就返回null

现在举个例子来说明这俩的区别

<ul class="list">
<li class="inner_list">
<div class="demo">????????????????????????????</div>
<div class="demo">app1</div>
<div class="demo">app2</div>
<div class="demo">app3</div>
<div class="demo">app4</div>
</li>
<li>Sam</li>
<li>Lily</li>
</ul>

let a = document.getElementsByClassName('demo')[2]
// 获取来的节点为 <div class="demo">app2</div>
console.log(a.previousElementSibling) // <div class="demo">app1</div>
console.log(a.previousSibling)	// #text(文本节点)

如果想理解文本节点是什么意思的，可以康康我之前的博客 友情链接

nextSibling: 获取它的下一个兄弟节点的信息，如果没有的话就返回null

nextElementSibling: 获取它的下一个(非文本节点非注释节点的)兄弟节点的信息，如果没有的话就返回null

总结

这些方法增加了获取节点的灵活性，灵活结合点击事件和其他事件，可以影响到同级的其他元素，且移植性也很好，不会轻易地因为html代码迁移导致方法失效。

最后

以上就是英勇期待为你收集整理的JS DOM 获取兄弟节点 previousSibling previousElementSibling nextSibling nextElementSibling - KaiqisanJS DOM previousSibling previousElementSibling nextSibling nextElementSibling总结的全部内容，希望文章能够帮你解决JS DOM 获取兄弟节点 previousSibling previousElementSibling nextSibling nextElementSibling - KaiqisanJS DOM previousSibling previousElementSibling nextSibling nextElementSibling总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。