JavaScript previousSibling
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 previousSibling 属性。此属性对于 DOM 遍历至关重要，它允许开发人员访问文档树中元素的上一个同级节点。
基本定义
previousSibling 属性返回指定元素在同一树级别（同级）的上一个节点。这包括所有节点类型，而不仅仅是元素节点。
需要注意的是，previousSibling 返回的是紧邻的上一个同级节点，它可能是文本节点、注释节点或元素节点。元素之间的空白字符通常会创建文本节点。
基本 previousSibling
本示例演示了如何访问元素的上一个同级节点。
<!DOCTYPE html>
<html>
<head>
<title>Basic previousSibling</title>
</head>
<body>
<div id="first">First div</div>
<div id="second">Second div</div>
<script>
const second = document.getElementById('second');
const previous = second.previousSibling;
console.log(previous); // Might be a text node
</script>
</body>
</html>
在这个基本示例中，我们有两个 div 元素。JavaScript 代码检索第二个 div，然后访问其上一个同级节点。请注意，结果可能是包含空白字符的文本节点。
这演示了 previousSibling 的基本用法，用于导航 DOM 树。该属性返回父节点 childNodes 列表中当前节点之前的那个节点。
访问元素节点
本示例展示了如何专门访问上一个元素同级节点。
<!DOCTYPE html>
<html>
<head>
<title>Element Siblings</title>
</head>
<body>
<div id="first">First div</div>
<!-- Comment -->
<div id="second">Second div</div>
<script>
const second = document.getElementById('second');
let previous = second.previousSibling;
// Loop to find the previous element node
while (previous && previous.nodeType !== 1) {
previous = previous.previousSibling;
}
console.log(previous); // First div element
</script>
</body>
</html>
这里我们有两个 div 元素，它们之间有一个注释节点。代码找到第二个 div，然后循环遍历其上一个同级节点，直到找到一个元素节点（nodeType 1）。
这演示了如何处理元素之间存在非元素节点的情况。nodeType 检查确保我们获取到的是一个元素节点。
修改上一个同级节点
本示例演示了如何修改上一个同级元素节点。
<!DOCTYPE html>
<html>
<head>
<title>Modifying Sibling</title>
</head>
<body>
<p>First paragraph</p>
<p id="target">Target paragraph</p>
<button onclick="changePrevious()">Change Previous</button>
<script>
function changePrevious() {
const target = document.getElementById('target');
const previous = target.previousElementSibling;
if (previous) {
previous.style.color = 'red';
previous.textContent = 'Modified content!';
}
}
</script>
</body>
</html>
在这个示例中，我们有两个段落和一个按钮。点击按钮时，按钮会更改目标段落上一个同级节点的样式和内容。
这表明 previousSibling（或 previousElementSibling）可用于动态修改相邻的元素。该示例使用 previousElementSibling 来跳过非元素节点。
检查同级节点是否存在
本示例展示了在访问上一个同级节点之前如何检查它是否存在。
<!DOCTYPE html>
<html>
<head>
<title>Checking Siblings</title>
</head>
<body>
<div id="first">First element</div>
<script>
const first = document.getElementById('first');
const previous = first.previousSibling;
if (previous) {
console.log('Previous sibling exists:', previous);
} else {
console.log('No previous sibling');
}
</script>
</body>
</html>
这里我们只有一个 div 元素。JavaScript 代码在尝试访问其上一个同级节点之前会检查它是否存在，从而防止潜在的错误。
这演示了在使用同级属性时的重要安全实践。在尝试访问同级节点的属性或方法之前，务必检查该同级节点是否存在。
导航复杂的 DOM
本示例展示了如何导航多个同级节点。
<!DOCTYPE html>
<html>
<head>
<title>Complex DOM Navigation</title>
</head>
<body>
<div>First</div>
<span>Second</span>
<!-- Comment -->
<p id="start">Third</p>
<div>Fourth</div>
<script>
const start = document.getElementById('start');
let node = start;
let count = 0;
// Count all previous siblings
while (node = node.previousSibling) {
count++;
}
console.log(`Total previous siblings: ${count}`);
</script>
</body>
</html>
在这个示例中，我们有多个不同类型的节点。JavaScript 代码从一个特定的元素开始，并计算所有上一个同级节点，无论它们的类型如何。
这演示了如何使用 previousSibling 遍历 DOM 树中的所有前置节点。循环会一直继续，直到没有更多上一个同级节点为止。
来源
在本文中，我们展示了如何在 JavaScript 中使用 previousSibling 属性。此属性对于 Web 开发中的 DOM 遍历和元素导航至关重要。
作者
列出 所有 JS DOM 教程。