在前端开发中，我们经常需要对 DOM 元素进行操作。当需要选择当前元素的下一个或上一个兄弟节点时，我们可以使用如下几种方法。
nextSibling 和 previousSibling 属性
DOM 元素对象拥有两个属性：nextSibling 和 previousSibling，它们分别表示当前节点的下一个和上一个兄弟节点。
---- ------------- ------------ ------------------- ----- -------- ----- ------- - ------------------------------------------ ----- ------ - -------------------- ------------------------------ -- ------------ ----- -------- - ----------------------- -------------------------------- -- ------ ---------
需要注意的是，这两个属性返回的是节点对象，而不是元素对象。因此，我们需要使用 nodeType 属性判断是否为元素节点。如果不是，可以继续调用 nextSibling 或 previousSibling 属性，直到找到元素节点为止。
nextElementSibling 和 previousElementSibling 属性
上面提到的 nextSibling 和 previousSibling 属性是针对节点而言的，而不仅仅是元素。如果我们只想获取元素节点的兄弟节点，可以使用 nextElementSibling 和 previousElementSibling 属性。
----- -------------- -------------- -------------- ------ -------- ----- --------- - ------------------------------------------- ----- ---------- - ----------------------------- ---------------------------------- -- --- ----- --------- - ------------------------------ --------------------------------- -- --- ---------
需要注意的是，这两个属性只返回元素节点，因此不需要使用 nodeType 属性做类型判断。
总结
在前端开发中，我们经常需要选择兄弟节点。使用 nextSibling 和 previousSibling 属性可以获取当前节点的下一个或上一个兄弟节点，但需要注意区分节点和元素节点。如果只想获取元素节点的兄弟节点，可以使用 nextElementSibling 和 previousElementSibling 属性。这些方法可以帮助我们更方便地操作 DOM 元素。
参考链接：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13465