JavaScript nextSibling 属性
在 JavaScript 中，我们有 nextSibling 和 nextElementSibling 属性。从技术上讲，两者具有相似的功能，但 nextSibling 在定义节点时更加明确。
nextSibling 属性获取某个指定节点的下一个节点。在这种情况下，节点可以是元素节点、文本节点或注释节点，但 nextElementSibling 只专注于抓取元素节点并丢弃所有其他字符、空格等。
在这里，我们将只可视化 nextSibling 属性如何执行以及即将到来的节点的检索。这个总体任务是跟踪 HTML 结构和更好的使用目的。
我们将在以下示例中创建 3 个 p 标签，每个标签都有其 id。让我们考虑一下 p 元素之间没有任何空格或任何其他字符，只有裸标签。
我们将获取 script 标签中的 first 元素，并检查它在后面的案例中显示的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<p id="first">First</p><p id="second">Second</p><p id="third">Third</p>
<script>
console.log( document.getElementById('first').nextSibling.innerText);
console.log( document.getElementById('first').nextSibling.nextSibling.innerText);
</script>
</body>
</html>
输出：
正如我们已经考虑过的第一个 p 标签，紧邻的下一个节点是 id="second"元素节点。类似地，我们通过对第一个节点使用两次 nextSibling 属性来安慰 "second" 旁边的元素节点，即 "third"。
nextSibling 属性考虑了元素节点、文本节点和评论节点。因此，如果我们可以检测到任何文本节点和空格，nextSibling 属性会将其计为下一次出现。
在我们的例子中，我们将一个接一个地设置 p 标签，然后是一个空格。因此，我们将得到 undefined，它指的是单个空格、空格、 等等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<p id="first">First</p>
<p id="second">Second</p>
<p id="third">Third</p>
<script>
console.log( document.getElementById('first').nextSibling.innerText);
console.log( document.getElementById('first').nextSibling.nextSibling.innerText);
</script>
</body>
</html>
输出：
所以，第一个节点之后的下一个节点是一个文本节点，即 space，因此我们得到 undefined 作为输出，下一个节点现在是"second"元素节点。这可以推断出 nextSibling 属性不会忽略任何节点。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
