JavaScript parentElement
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 parentElement 属性。此属性对于 DOM 遍历至关重要，它允许开发人员访问任何 DOM 节点的父元素。
基本定义
parentElement 属性返回指定元素的父元素。如果元素没有父元素，或者父元素不是元素节点，则返回 null。
此属性是只读的，它提供了一种方便的方式来在 DOM 树中向上导航。它与 parentNode 不同，因为它只返回元素节点。
基本的 parentElement 用法
此示例演示了如何访问简单 div 的父元素。
<!DOCTYPE html>
<html>
<head>
<title>Basic parentElement</title>
</head>
<body>
<div id="parent">
<p id="child">Child element</p>
</div>
<script>
const child = document.getElementById('child');
const parent = child.parentElement;
console.log(parent.id); // Outputs: "parent"
</script>
</body>
</html>
在这个基本示例中，我们有一个嵌套在 div 中的段落元素。JavaScript 代码检索子元素，然后使用 parentElement 访问其父元素。
这演示了 parentElement 在 DOM 树中向上导航的基本用法。该属性返回所选节点的直接父元素。
检查父元素是否存在
此示例展示了如何安全地检查元素是否具有父元素。
<!DOCTYPE html>
<html>
<head>
<title>Parent Existence Check</title>
</head>
<body>
<div id="container">
<button id="btn">Check Parent</button>
</div>
<script>
const btn = document.getElementById('btn');
if (btn.parentElement) {
console.log('Parent exists:', btn.parentElement.id);
} else {
console.log('No parent element');
}
</script>
</body>
</html>
在这里，我们在尝试访问按钮元素的父元素之前先检查它是否存在。这是在处理动态创建的元素时避免错误的良好实践。
如果元素没有父元素，或者父元素不是元素节点（例如 document），则 parentElement 属性将为 null。
修改父元素的样式
此示例演示了如何更改父元素的样式。
<!DOCTYPE html>
<html>
<head>
<title>Parent Style Modification</title>
<style>
#parentBox {
padding: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="parentBox">
<p id="childText">Click me to change my parent's style</p>
</div>
<script>
const child = document.getElementById('childText');
child.addEventListener('click', function() {
const parent = child.parentElement;
parent.style.backgroundColor = 'lightblue';
parent.style.padding = '30px';
});
</script>
</body>
</html>
在此示例中，单击段落元素会更改其父元素的样式。我们使用 parentElement 来访问父 div 并修改其 CSS。
这展示了如何在事件处理程序中使用 parentElement 动态修改祖先元素。样式更改应用于被单击元素的直接父元素。
从父元素中移除子元素
此示例展示了如何使用 parentElement 将元素从其父元素中移除。
<!DOCTYPE html>
<html>
<head>
<title>Remove Child from Parent</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li id="removeMe">Item 2</li>
<li>Item 3</li>
</ul>
<button onclick="removeItem()">Remove Item 2</button>
<script>
function removeItem() {
const item = document.getElementById('removeMe');
item.parentElement.removeChild(item);
}
</script>
</body>
</html>
这里我们有一个包含三个项目的列表。按钮单击处理程序通过访问第二个项目的父元素并调用 removeChild 来移除它。
这演示了一种常见模式，即使用 parentElement 获取引用父元素所需的引用，以便从 DOM 中移除子元素。
向上遍历多个级别
此示例展示了如何遍历 DOM 树中的多个父级。
<!DOCTYPE html>
<html>
<head>
<title>Multi-level Traversal</title>
</head>
<body>
<div id="grandparent">
<div id="parent">
<div id="child">
<button id="btn">Find Grandparent</button>
</div>
</div>
</div>
<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', function() {
const grandparent = btn.parentElement.parentElement;
console.log('Grandparent ID:', grandparent.id);
grandparent.style.border = '2px solid red';
});
</script>
</body>
</html>
在此示例中，单击按钮通过链接两个 parentElement 调用来访问祖父元素。然后，它会记录祖父元素的 ID 并为其添加边框。
这演示了如何通过多个 parentElement 调用来遍历 DOM 树中的多个级别。每次调用都会在层次结构中向上移动一个级别。
来源
在本文中，我们展示了如何在 JavaScript 中使用 parentElement 属性。此属性是 Web 开发中 DOM 遍历和元素操作的基础。
作者
列出 所有 JS DOM 教程。