JS DOM 获取兄弟节点 previousSibling previousElementSibling nextSibling nextElementSibling - Kaiqisan

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代码迁移导致方法失效。