JavaScript 获取父元素 parentNode

摘要：在本教程中，您将学习如何使用 JavaScript Node 对象的 parentNode 属性来获取元素的父节点。

parentNode 属性简介

要获取 DOM 树中指定节点的父节点，可以使用 parentNode 属性。

let parent = node.parentNode;Code language: JavaScript (javascript)

parentNode 是只读的。

Document 和 DocumentFragment 节点没有父节点。因此，parentNode 将始终为 null。

如果您创建了一个新节点，但尚未将其附加到 DOM 树，则该节点的 parentNode 也将为 null。

JavaScript parentNode 示例

请参见以下 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>
Code language: HTML, XML (xml)

下图显示了控制台中的输出

工作原理

首先，使用 querySelector() 方法选择具有 .note 类的元素。
其次，找到该元素的父节点。

总结

node.parentNode 返回指定节点的只读父节点，如果不存在则返回 null。
document 和 DocumentFragment 没有父节点。

测验

本教程对您有帮助吗？