JavaScript previousElementSibling
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 previousElementSibling 属性。此属性对于 DOM 遍历至关重要，它允许开发人员访问 DOM 树中的上一个同级元素。
基本定义
previousElementSibling 属性返回同一树级别上的上一个元素节点。它仅返回元素节点，忽略文本节点和注释。
此属性是只读的，属于 Element 接口。如果没有上一个元素同级节点，则返回 null。它可用于在不使用复杂选择器的情况下导航同级元素。
基础 previousElementSibling
此示例演示了如何访问元素的上一个同级节点。
<!DOCTYPE html>
<html>
<head>
<title>Basic previousElementSibling</title>
</head>
<body>
<div id="first">First div</div>
<div id="second">Second div</div>
<script>
const secondDiv = document.getElementById('second');
const previousDiv = secondDiv.previousElementSibling;
console.log(previousDiv.textContent); // Outputs: First div
</script>
</body>
</html>
在此基本示例中，我们有两个 div 元素。我们选择第二个 div 并使用 previousElementSibling 访问其上一个同级节点。
该属性返回第一个 div 元素，我们记录其文本内容。这显示了 previousElementSibling 在 DOM 导航同级元素中的基本用法。
更改上一个同级元素的样式
此示例显示了如何修改上一个同级元素的样式。
<!DOCTYPE html>
<html>
<head>
<title>Changing Previous Sibling Style</title>
</head>
<body>
<p>First paragraph</p>
<p id="target">Second paragraph</p>
<button onclick="highlightPrevious()">Highlight Previous</button>
<script>
function highlightPrevious() {
const target = document.getElementById('target');
const previous = target.previousElementSibling;
previous.style.backgroundColor = 'yellow';
previous.style.padding = '10px';
}
</script>
</body>
</html>
这里我们有两个段落和一个按钮。单击按钮时，按钮会找到目标段落的上一个同级节点并更改其样式。
这表明 previousElementSibling 可用于响应用户操作动态修改相邻元素的外观。
列表项中的导航
此示例演示了在无序列表中使用 previousElementSibling。
<!DOCTYPE html>
<html>
<head>
<title>List Navigation</title>
</head>
<body>
<ul>
<li>Item 1</li>
<li id="second">Item 2</li>
<li>Item 3</li>
</ul>
<button onclick="showPrevious()">Show Previous Item</button>
<script>
function showPrevious() {
const current = document.getElementById('second');
const previous = current.previousElementSibling;
alert('Previous item: ' + previous.textContent);
}
</script>
</body>
</html>
在此示例中，我们有一个包含三个项目的列表。按钮触发一个函数，该函数查找中间列表项的上一个同级节点。
这表明 previousElementSibling 在遍历列表结构和访问 DOM 中的相邻项方面非常有用。
表单字段导航
此示例显示了如何使用 previousElementSibling 在表单字段之间导航。
<!DOCTYPE html>
<html>
<head>
<title>Form Field Navigation</title>
</head>
<body>
<input type="text" placeholder="First name">
<input type="text" id="lastName" placeholder="Last name">
<button onclick="focusPrevious()">Focus Previous Field</button>
<script>
function focusPrevious() {
const lastNameField = document.getElementById('lastName');
const previousField = lastNameField.previousElementSibling;
previousField.focus();
}
</script>
</body>
</html>
这里我们有两个输入字段和一个按钮。单击按钮时，按钮会将焦点移动到相对于姓名字段的上一个输入字段。
这演示了 previousElementSibling 在表单导航中的实际用例，可以实现直观的字段到字段移动。
检查上一个同级节点
此示例显示了如何检查一个元素是否有上一个同级节点。
<!DOCTYPE html>
<html>
<head>
<title>Checking for Previous Sibling</title>
</head>
<body>
<div id="first">First element</div>
<div id="second">Second element</div>
<button onclick="checkSiblings()">Check Siblings</button>
<p id="result"></p>
<script>
function checkSiblings() {
const first = document.getElementById('first');
const result = document.getElementById('result');
if (first.previousElementSibling) {
result.textContent = 'Has previous sibling';
} else {
result.textContent = 'No previous sibling';
}
}
</script>
</body>
</html>
在此示例中，我们检查第一个 div 元素是否有上一个同级节点。结果显示在一个段落元素中。
这表明如何安全地使用 previousElementSibling，即在尝试访问其属性或方法之前先检查它是否存在。
来源
在本文中，我们展示了如何在 JavaScript 中使用 previousElementSibling 属性。此属性对于 Web 开发中的 DOM 遍历和元素导航至关重要。
作者
列出 所有 JS DOM 教程。