JavaScript 获取父元素 parentNode
您将学习如何使用 JavaScript 的 Node 对象的 parentNode 属性获取元素的父元素
1 min read
By
myfreax
在本教程中，您将学习如何使用 JavaScript 的 Node 对象的 parentNode 属性获取元素的父元素。
ParentNode 属性介绍
要获取 DOM 树中指定节点的父节点，可以使用节点的 parentNode 属性：
let parent = node.parentNode;
parentNode 是只读属性。
Document 和 DocumentFragment 节点没有父节点。因此，parentNode 属性永远都是 null。
如果您创建一个新节点但尚未将其附加到 DOM 树，则节点的 parentNode 属性也将为 null。
JavaScript 父节点示例
请阅读以下 HTML 文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript parentNode</title>
</head>
<body>
<div id="main">
<p class="note">This is a note!</p>
</div>
<script>
let note = document.querySelector('.note');
console.log(note.parentNode);
</script>
</body>
</html>下图是浏览器控制台 Console 的输出：
代码是如何运行的：
- 首先，使用
querySelector方法并指定类名.note选择元素。 - 其次，找到该元素的父节点。
结论
node.parentNode返回指定节点的只读父节点，如果它不存在则返回null。document和DocumentFragment没有父节点。
