节点:nextSibling 属性

只读的nextSibling属性是Node接口的属性,返回在指定节点的父节点的childNodes中紧随指定节点的节点,如果指定节点是父元素的最后一个子节点,则返回null

注意:浏览器会在文档中插入Text节点以表示源标记中的空白。因此,使用Node.firstChildNode.previousSibling获取的节点可能引用的是空白文本节点,而不是作者想要获取的实际元素。

文章DOM 中的空白包含有关此行为的更多信息。

可以使用Element.nextElementSibling来获取下一个元素,跳过任何空白节点、其他元素间文本或注释。

要以相反的方式遍历子节点列表,请使用Node.previousSibling

表示当前节点的下一个兄弟节点的Node,如果没有,则为null

示例

html
<div id="div-1">Here is div-1</div>
<div id="div-2">Here is div-2</div>
<br />
<output><em>Not calculated.</em></output>
js
let el = document.getElementById("div-1").nextSibling;
let i = 1;

let result = "Siblings of div-1:\n";

while (el) {
  result += `${i}. ${el.nodeName}\n`;
  el = el.nextSibling;
  i++;
}

const output = document.querySelector("output");
output.innerText = result;

规范

规范
DOM 标准
# ref-for-dom-node-nextsibling①

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅