HTML DOM nextSibling 属性

在 Web 开发中，我们经常需要操作 DOM 元素，其中一个常用的属性就是 nextSibling。这个属性返回指定节点之后紧跟的节点，在 DOM 树中的位置上是相邻的兄弟节点。

语法

nextSibling 是一个只读属性，它返回一个节点对象，可以是元素节点、文本节点、注释节点等。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<body>

<p id="first">第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>

<script>
var firstPara = document.getElementById("first");
var nextPara = firstPara.nextSibling;
console.log(nextPara);
</script>

</body>
</html>

在上面的示例中，我们找到了 id 为 first 的段落元素，然后使用 nextSibling 属性找到了它的下一个兄弟节点。在这个例子中，nextPara 的值将会是第二个段落元素。

注意事项

• nextSibling 返回的节点对象可能是文本节点、注释节点等，需要根据实际情况做相应处理。
• 如果要获取元素节点，可以使用 nextElementSibling 属性。

示例

让我们来看一个更复杂的示例，演示如何使用 nextSibling 属性来遍历元素节点。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<body>

<ul id="list">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<script>
var list = document.getElementById("list");
var currentItem = list.firstElementChild;

while (currentItem) {
  console.log(currentItem.textContent);
  currentItem = currentItem.nextSibling;
}
</script>

</body>
</html>

在这个示例中，我们首先找到了 id 为 list 的无序列表元素，然后使用一个循环遍历了列表中的每一个元素节点，并打印了它们的文本内容。

希望这篇文章能够帮助你更好地理解和应用 HTML DOM 中的 nextSibling 属性。Happy coding!