JavaScript nextElementSibling
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 nextElementSibling 属性。此属性对于 DOM 遍历至关重要，它允许开发人员访问文档树中下一个同级元素。
基本定义
nextElementSibling 属性返回紧跟在指定元素之后的元素，该元素在其父级的子节点列表中。它只返回元素节点，跳过任何文本节点或注释节点。
此属性是只读的，如果没有更多同级元素，则返回 null。它是 DOM 遍历 API 的一部分，可在所有现代浏览器中运行。
基本 nextElementSibling
此示例演示如何访问 div 的下一个同级元素。
<!DOCTYPE html>
<html>
<head>
<title>Basic nextElementSibling</title>
</head>
<body>
<div id="first">First Element</div>
<div id="second">Second Element</div>
<script>
const firstElement = document.getElementById('first');
const nextSibling = firstElement.nextElementSibling;
console.log(nextSibling.id); // Outputs: "second"
</script>
</body>
</html>
在这个基本示例中，我们有两个 div 元素。JavaScript 代码通过 ID 获取第一个元素，然后使用 nextElementSibling 访问其下一个同级元素。
这演示了 nextElementSibling 遍历 DOM 的基本用法。该属性返回文档树中的下一个元素节点，然后我们可以对其进行操作。
遍历列表
此示例展示了如何使用 nextElementSibling 遍历无序列表。
<!DOCTYPE html>
<html>
<head>
<title>List Traversal</title>
</head>
<body>
<ul>
<li id="item1">Item 1</li>
<li id="item2">Item 2</li>
<li id="item3">Item 3</li>
</ul>
<script>
const firstItem = document.getElementById('item1');
const secondItem = firstItem.nextElementSibling;
const thirdItem = secondItem.nextElementSibling;
console.log(secondItem.id); // Outputs: "item2"
console.log(thirdItem.id); // Outputs: "item3"
</script>
</body>
</html>
这里我们有一个包含三个项目的无序列表。JavaScript 代码从第一个项目开始，并使用 nextElementSibling 访问后续项目。
这演示了如何按顺序使用 nextElementSibling 遍历同级元素。每次调用都会移至 DOM 树中的下一个元素。
样式化下一个同级元素
此示例演示如何更改下一个同级元素的样式。
<!DOCTYPE html>
<html>
<head>
<title>Style Next Sibling</title>
</head>
<body>
<div id="trigger">Click me to highlight next div</div>
<div id="target">This will be highlighted</div>
<script>
const trigger = document.getElementById('trigger');
trigger.addEventListener('click', function() {
const nextDiv = this.nextElementSibling;
nextDiv.style.backgroundColor = 'yellow';
nextDiv.style.padding = '10px';
});
</script>
</body>
</html>
在此示例中，我们有两个 div 元素。当单击第一个 div 时，它使用 nextElementSibling 来查找并设置下一个 div 的样式。
这展示了如何在事件处理程序中使用 nextElementSibling 来动态修改相邻元素。该属性提供了对 DOM 中相关元素的快速访问。
导航菜单示例
此示例展示了一个具有导航菜单的实际用例。
<!DOCTYPE html>
<html>
<head>
<title>Navigation Menu</title>
<style>
.active { color: red; font-weight: bold; }
</style>
</head>
<body>
<nav>
<a href="#" id="home">Home</a>
<a href="#" id="about">About</a>
<a href="#" id="contact">Contact</a>
</nav>
<script>
const aboutLink = document.getElementById('about');
aboutLink.classList.add('active');
const nextLink = aboutLink.nextElementSibling;
if (nextLink) {
nextLink.style.borderLeft = '2px solid red';
}
</script>
</body>
</html>
这里我们有一个简单的导航菜单。JavaScript 代码将“关于”链接标记为活动状态，然后设置其下一个同级链接（“联系”链接）的样式。
这演示了 nextElementSibling 在导航菜单中的实际应用。该属性有助于在相邻菜单项之间创建视觉关联。
Null 检查示例
此示例演示了使用 nextElementSibling 进行 null 检查的重要性。
<!DOCTYPE html>
<html>
<head>
<title>Null Check</title>
</head>
<body>
<div id="last">This is the last element</div>
<script>
const lastElement = document.getElementById('last');
const nextElement = lastElement.nextElementSibling;
if (nextElement) {
console.log('Next element exists:', nextElement);
} else {
console.log('No next element exists');
}
</script>
</body>
</html>
在此示例中，我们有一个 div 元素。JavaScript 代码尝试访问其下一个同级元素，但该元素不存在，因此 nextElementSibling 返回 null。
这演示了在使用 nextElementSibling 时进行 null 检查的重要性。在尝试访问返回值的属性或方法之前，请务必验证结果。
来源
在本文中，我们展示了如何在 JavaScript 中使用 nextElementSibling。此属性对于 Web 开发中的 DOM 遍历和元素导航至关重要。
作者
列出 所有 JS DOM 教程。