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

132 阅读1分钟

"获取元素的兄弟节点可以使用 JavaScript 的 nextSiblingpreviousSibling 属性。这两个属性分别表示当前元素的下一个兄弟节点和上一个兄弟节点。

// 获取下一个兄弟节点
var nextSibling = element.nextSibling;

// 获取上一个兄弟节点
var previousSibling = element.previousSibling;

需要注意的是,nextSiblingpreviousSibling 属性返回的是节点对象,可能是元素节点、文本节点或注释节点。如果需要筛选出元素节点,可以使用 nodeType 属性进行判断。

// 获取下一个兄弟元素节点
var nextSiblingElement = element.nextSibling;
while (nextSiblingElement && nextSiblingElement.nodeType !== 1) {
  nextSiblingElement = nextSiblingElement.nextSibling;
}

// 获取上一个兄弟元素节点
var previousSiblingElement = element.previousSibling;
while (previousSiblingElement && previousSiblingElement.nodeType !== 1) {
  previousSiblingElement = previousSiblingElement.previousSibling;
}

上述代码使用了 while 循环和 nodeType 属性来判断兄弟节点是否为元素节点,如果不是则继续向下一个节点遍历,直到找到元素节点为止。

此外,还可以使用 nextElementSiblingpreviousElementSibling 属性直接获取下一个和上一个兄弟元素节点。

// 获取下一个兄弟元素节点
var nextSiblingElement = element.nextElementSibling;

// 获取上一个兄弟元素节点
var previousSiblingElement = element.previousElementSibling;

nextElementSiblingpreviousElementSibling 属性直接返回下一个和上一个兄弟元素节点,省去了筛选的步骤。

综上所述,要获取元素的兄弟节点,可以使用 nextSiblingpreviousSibling 属性,并结合 nodeType 属性进行筛选;或者直接使用 nextElementSiblingpreviousElementSibling 属性获取兄弟元素节点。"