JavaScript 中 DOM parentNode 和 parentElement 的区别

在 JavaScript 中，DOM（文档对象模型）提供了许多属性和方法来访问和操作 HTML 和 XML 文档。其中包括 parentNode 和 parentElement 两个属性，它们都可以用来访问一个节点的父节点。不过，它们之间有一些差别，本文将介绍它们的区别。

parentNode

parentNode 属性是一种通用的属性，它可用于访问一个节点的父节点。如果一个节点没有父节点，它的 parentNode 属性将返回 null。以下是使用 parentNode 属性的一些例子：

let childNode = document.querySelector("#my-child-node");
let parentNode = childNode.parentNode;

上面的代码将选择一个 ID 为 my-child-node 的节点，并将它的父节点赋值给 parentNode 变量。在这个案例中，parentNode 可能是 body 元素或者某个更高级别的元素。

parentElement

parentElement 属性是 Element 对象独有的属性。与 parentNode 属性类似，它也是用于访问一个节点的父元素。与 parentNode 属性不同的是，如果一个节点没有父元素，它的 parentElement 属性将返回 null。以下是使用 parentElement 属性的一些例子：

let childElement = document.querySelector("#my-child-element");
let parentElement = childElement.parentElement;

上面的代码将选择一个 ID 为 my-child-element 的元素，并将它的父元素赋值给 parentElement 变量。在这个案例中，parentElement 可能是 div 元素或者某个更高级别的元素。

总结

• parentNode 属性是一个通用属性，可用于访问任意节点的父节点。
• parentElement 属性是 Element 对象独有的属性，仅用于访问元素节点的父元素。
• 如果一个节点没有父节点或者父元素，它们的返回值都将为 null。

在开发中，我们需要根据需求选择使用什么属性，以便更好地访问和操作 HTML 或 XML 文档。