JavaScript parentNode
最后修改于 2025 年 4 月 2 日
在本文中，我们探讨了 JavaScript 中的 parentNode 属性。此属性对于 DOM 遍历至关重要，它允许开发人员访问文档层次结构中元素的直接父级。
基本定义
parentNode 属性返回 DOM 树中指定元素的父节点。除根文档节点外，DOM 中的每个节点都有一个父节点。
父节点可以是元素节点、文档节点或文档片段节点。如果节点没有父节点，parentNode 将返回 null。
基本的 parentNode 示例
此示例演示了如何访问简单 div 元素的父元素。
<!DOCTYPE html>
<html>
<head>
<title>Basic parentNode</title>
</head>
<body>
<div id="parent">
<p id="child">Child element</p>
</div>
<script>
const child = document.getElementById('child');
const parent = child.parentNode;
console.log(parent.id); // Outputs: parent
</script>
</body>
</html>
在此基本示例中，我们有一个包含段落的 div 元素。JavaScript 代码获取段落元素，然后使用 parentNode 访问其父元素。
这演示了 parentNode 用于向上遍历 DOM 树的基本用法。然后，父元素的 ID 会被记录到控制台。
更改父元素样式
此示例展示了如何使用 parentNode 修改父元素的样式。
<!DOCTYPE html>
<html>
<head>
<title>Parent Style Change</title>
</head>
<body>
<div id="container">
<button id="myButton">Change Parent Color</button>
</div>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
const parent = button.parentNode;
parent.style.backgroundColor = 'lightblue';
parent.style.padding = '20px';
});
</script>
</body>
</html>
这里我们有一个包含在 div 容器中的按钮。单击时，按钮会使用 parentNode 访问其父 div 并修改其样式。
这演示了如何在事件处理程序中使用 parentNode 来动态修改父元素。样式更改会直接应用于父容器。
从父级移除子级
此示例演示了如何使用 parentNode 从父级移除元素。
<!DOCTYPE html>
<html>
<head>
<title>Remove Child</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</button>
<script>
function removeItem() {
const item = document.getElementById('removeMe');
const parent = item.parentNode;
parent.removeChild(item);
}
</script>
</body>
</html>
在此示例中，我们有一个包含三个项目的列表。按钮会触发一个函数，该函数通过访问第二个列表项的父级并调用 removeChild 来移除该列表项。
这表明 parentNode 通常与 removeChild 一起使用来从 DOM 中删除元素。此操作需要父级引用。
检查父节点类型
此示例演示了如何检查父节点的类型。
<!DOCTYPE html>
<html>
<head>
<title>Check Parent Type</title>
</head>
<body>
<div id="wrapper">
<p id="text">Sample text</p>
</div>
<script>
const text = document.getElementById('text');
const parent = text.parentNode;
if (parent.nodeType === Node.ELEMENT_NODE) {
console.log('Parent is an element node');
} else if (parent.nodeType === Node.DOCUMENT_NODE) {
console.log('Parent is the document node');
}
</script>
</body>
</html>
在这里，我们使用 nodeType 检查段落的父节点的类型。代码会检查父节点是元素节点还是文档节点。
这表明 parentNode 可与节点类型检查一起使用，以确保您在代码中处理的是预期的父元素类型。
向上遍历多个级别
此示例展示了如何使用 parentNode 向上遍历 DOM 树的多个级别。
<!DOCTYPE html>
<html>
<head>
<title>Multi-level Traversal</title>
</head>
<body>
<div id="grandparent">
<div id="parent">
<span id="child">Click me</span>
</div>
</div>
<script>
const child = document.getElementById('child');
child.addEventListener('click', function() {
const parent = child.parentNode;
const grandparent = parent.parentNode;
console.log('Parent ID:', parent.id);
console.log('Grandparent ID:', grandparent.id);
});
</script>
</body>
</html>
在此示例中，我们有一个包含祖父、父和子元素的嵌套结构。单击处理程序使用 parentNode 向上遍历了两个级别。
这表明多次调用 parentNode 可以向上导航 DOM 层次结构。每次调用都会在树结构中向上移动一个级别。
来源
在本文中，我们展示了如何在 JavaScript 中使用 parentNode 属性。此属性对于 Web 开发中的 DOM 遍历和操作至关重要。
作者
列出 所有 JS DOM 教程。