在本教程中,您将学习如何使用 JavaScript 的 Node 对象的 parentNode 属性获取元素的父元素。
要获取 DOM 树中指定节点的父节点,可以使用节点的 parentNode 属性:
- let parent = node.parentNode;
-
parentNode 是只读属性。
Document 和 DocumentFragment 节点没有父节点。因此,parentNode 属性永远都是 null。
如果您创建一个新节点但尚未将其附加到 DOM 树,则节点的 parentNode 属性也将为 null。
请阅读以下 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 的输出:
代码是如何运行的: