在前端开发中，DOM（文档对象模型）是非常重要的概念。其中，父节点和parentElement是两个看起来很相似的属性。然而，它们之间存在一些不同之处，这些细节可能会影响到代码的正确性和性能。
父节点和parentElement的相似之处
首先，我们需要了解父节点和parentElement的相似之处。它们都是DOM树结构中的属性，可以访问一个节点的直接父节点。例如，假设有以下HTML代码：
----- --------- ---------- ------
如果我们想获取“p”元素的父节点，我们可以使用以下JavaScript代码：
----- - - ---------------------------- ----- ------- - ------------- ----- ------- - ----------------
在这个例子中，parent1 和 parent2 的值都是<div>元素。
父节点和parentElement的区别
尽管父节点和parentElement都可以用来获取一个节点的直接父节点，但是它们之间还是存在一些差异的。
区别1：获取document节点时的返回值不同
当我们试图获取document节点的父节点时，parentNode 会返回null，因为document没有父节点。而parentElement 则会返回 null。这是因为 parentElement 只在元素节点存在时有效，而 document 不属于元素节点。
----- --- - ------------------------- ---------------------------- -- ---- ------------------------------- -- ----
区别2：获取非元素节点的返回值不同
parentNode 是从一个节点继承而来的属性，因此所有节点类型都有该属性。然而，只有元素节点才有 parentElement 属性。如果我们尝试从文本节点或注释节点中获取它们的 parentElement，将会返回 null。
----- --------- ---------- ---- ---- -- - ------- --- ------
----- ------- - ---------------------------------- -------------------------------- -- ----------- ----------------------------------- -- ----
区别3：获取非直接父节点的返回值不同
当我们获取一个节点的父节点或 parentElement 时，它们都只会返回该节点的直接父节点。对于非直接父节点（例如祖先节点），两者的表现也不同。 parentNode 可以一直向上查找，直到找到根节点为止，而 parentElement 只能返回该节点的最近的包含元素。
---- -----------------
---- ------------
--------- ----------
------
----------- - - ---------------------------- ----------------------------- -- ----------- -------------------------------- -- ------
区别4：获取样式时的返回值不同
如果我们想要获取一个元素的样式，可以使用 window.getComputedStyle() 方法。此方法需要传入一个元素作为参数。在某些情况下，获取到的结果可能与预期不符。这是因为 getComputedStyle() 方法基于 parentElement 属性来计算结果，而不是 parentNode。
---- ----------- -------------- ------- ---- ---------- -------------- ------------- ------
----- ----- - --------------------------------- ----- ------- - ----------------- ----- ------- - -------------------- ---------------------------------------------- -- ----- ---------------------------------------------- -- ------
总结
尽管父节点和parentElement具有相似之处，但它们在实际使用中存在区别。了解这
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8610