[js] 如何获取元素的兄弟节点?

2,569 阅读1分钟

"[js] 如何获取元素的兄弟节点?

获取元素的兄弟节点可以通过使用 JavaScript 中的一些 DOM 方法来实现。以下是几种常见的方法:

  1. 使用 previousSiblingnextSibling 属性
const element = document.getElementById('myElement');
const previousSibling = element.previousSibling;
const nextSibling = element.nextSibling;

上述代码中,我们首先通过 getElementById 方法获取到指定的元素,然后使用 previousSibling 属性获取前一个兄弟节点,使用 nextSibling 属性获取后一个兄弟节点。

  1. 使用 previousElementSiblingnextElementSibling 属性
const element = document.getElementById('myElement');
const previousSibling = element.previousElementSibling;
const nextSibling = element.nextElementSibling;

与前一种方法类似,这种方法使用的是 previousElementSiblingnextElementSibling 属性。不同的是,这些属性只会返回元素节点,而不会返回其他类型的节点(比如文本节点)。

  1. 使用 parentNodechildren 属性
const element = document.getElementById('myElement');
const parent = element.parentNode;
const siblings = Array.from(parent.children).filter(child => child !== element);

上述代码中,我们首先通过 getElementById 方法获取到指定的元素,然后使用 parentNode 属性获取父节点。接着,我们使用 children 属性获取所有子节点,然后通过 filter 方法将目标元素排除掉,从而得到其他的兄弟节点。

需要注意的是,children 属性返回的是一个类似数组的对象,因此我们需要将其转换为真正的数组,以便使用数组的方法。

总结:

以上是几种常见的方法来获取元素的兄弟节点。根据具体的需求和场景,选择合适的方法来获取兄弟节点。这些方法都是使用原生的 JavaScript DOM 方法实现的,因此在各个浏览器中都可以正常使用。

希望本文能够帮助你理解如何获取元素的兄弟节点。如果有任何问题或疑惑,请随时提问。"