JavaScript nextSibling
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 nextSibling 属性。此属性对于 DOM 遍历至关重要，它允许开发人员访问 DOM 树中元素的下一个同级节点。
基本定义
nextSibling 属性返回父级 childNodes 列表中紧跟在指定节点之后的节点。这包括所有节点类型，不仅仅是元素节点。
返回的节点可以是元素节点、文本节点或注释节点。如果没有下一个同级节点，则该属性返回 null。元素之间的空格通常被视为 DOM 中的文本节点。
基本的 nextSibling 用法
此示例演示了如何访问元素的下一个同级节点。
<!DOCTYPE html>
<html>
<head>
<title>Basic nextSibling</title>
</head>
<body>
<ul>
<li id="first">First item</li>
<li id="second">Second item</li>
<li>Third item</li>
</ul>
<script>
const firstItem = document.getElementById('first');
const nextSibling = firstItem.nextSibling;
console.log(nextSibling); // Might be a text node
const secondItem = firstItem.nextElementSibling;
console.log(secondItem.id); // "second"
</script>
</body>
</html>
在此示例中，我们首先尝试访问第一个列表项的下一个同级节点。由于空格，直接的 nextSibling 可能会返回一个文本节点。
然后我们使用 nextElementSibling，它会跳过非元素节点，直接返回下一个元素同级节点。这在实践中通常更有用。
处理文本节点
此示例展示了如何处理 nextSibling 返回的文本节点。
<!DOCTYPE html>
<html>
<head>
<title>Text Nodes</title>
</head>
<body>
<div id="container">
<p id="para1">First paragraph</p>
Some text between paragraphs
<p id="para2">Second paragraph</p>
</div>
<script>
const para1 = document.getElementById('para1');
const nextNode = para1.nextSibling;
console.log(nextNode.nodeType); // 3 (text node)
console.log(nextNode.nodeValue.trim()); // "Some text between paragraphs"
const nextElement = para1.nextElementSibling;
console.log(nextElement.id); // "para2"
</script>
</body>
</html>
这里我们展示了 nextSibling 可以返回元素之间的文本节点。我们检查 nodeType（文本节点为 3）并访问其内容。
该示例还展示了 nextElementSibling 如何跳过这些文本节点并直接转到下一个元素节点。根据您的需求，这两种属性都有其用途。
遍历同级节点
此示例演示了如何遍历多个同级节点。
<!DOCTYPE html>
<html>
<head>
<title>Sibling Traversal</title>
</head>
<body>
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
<li class="item">Item 4</li>
</ul>
<script>
const firstItem = document.querySelector('.item');
let current = firstItem;
while (current) {
console.log(current.textContent);
current = current.nextElementSibling;
}
</script>
</body>
</html>
在此示例中，我们从第一个列表项开始，并使用 while 循环遍历所有同级节点。我们使用 nextElementSibling 来跳过任何非元素节点。
当您需要处理元素的所有同级节点时，此模式非常有用。循环将一直进行，直到 nextElementSibling 返回 null，表示没有更多同级节点。
修改下一个同级节点
此示例显示了如何修改下一个同级元素。
<!DOCTYPE html>
<html>
<head>
<title>Modifying Sibling</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<p>First paragraph</p>
<p id="target">This will be highlighted</p>
<p>Third paragraph</p>
</div>
<button onclick="highlightNext()">Highlight Next</button>
<script>
function highlightNext() {
const target = document.getElementById('target');
const nextPara = target.nextElementSibling;
if (nextPara) {
nextPara.classList.add('highlight');
}
}
</script>
</body>
</html>
这里我们有一个按钮，可以突出显示目标段落的下一个同级节点。我们使用 nextElementSibling 来获取下一个段落元素。
在应用更改之前，我们会检查同级节点是否存在。当您到达序列中的最后一个元素时，这一点很重要，可以避免错误。
检查最后一个子节点
此示例演示了如何检查一个元素是否是最后一个子节点。
<!DOCTYPE html>
<html>
<head>
<title>Last Child Check</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li id="middle">Item 2</li>
<li>Item 3</li>
</ul>
<script>
const middleItem = document.getElementById('middle');
const nextSibling = middleItem.nextElementSibling;
if (nextSibling) {
console.log('Next item:', nextSibling.textContent);
} else {
console.log('This is the last item');
}
const lastItem = document.querySelector('#list li:last-child');
console.log(lastItem.nextElementSibling === null); // true
</script>
</body>
</html>
在此示例中，我们检查一个元素是否具有下一个同级节点，以确定它是否是最后一个子节点。我们还演示了如何直接选择最后一个子节点。
此技术在处理列表或菜单时非常有用，您需要在其中单独处理最后一项。检查 null 对于编写健壮的代码至关重要。
来源
在本文中，我们展示了如何在 JavaScript 中使用 nextSibling 和 nextElementSibling 属性。这些属性对于 Web 开发中的 DOM 遍历和元素操作至关重要。
作者
列出 所有 JS DOM 教程。