DOM的父节点和parentElement之间的差异

在前端开发中，DOM（文档对象模型）是非常重要的概念。其中，父节点和parentElement是两个看起来很相似的属性。然而，它们之间存在一些不同之处，这些细节可能会影响到代码的正确性和性能。

父节点和parentElement的相似之处

首先，我们需要了解父节点和parentElement的相似之处。它们都是DOM树结构中的属性，可以访问一个节点的直接父节点。例如，假设有以下HTML代码：

<div>
  <p>Hello, world!</p>
</div>

如果我们想获取“p”元素的父节点，我们可以使用以下JavaScript代码：

const p = document.querySelector('p');
const parent1 = p.parentNode;
const parent2 = p.parentElement;

在这个例子中，parent1 和 parent2 的值都是<div>元素。

父节点和parentElement的区别

尽管父节点和parentElement都可以用来获取一个节点的直接父节点，但是它们之间还是存在一些差异的。

区别1：获取document节点时的返回值不同

当我们试图获取document节点的父节点时，parentNode 会返回null，因为document没有父节点。而parentElement 则会返回 null。这是因为 parentElement 只在元素节点存在时有效，而 document 不属于元素节点。

const doc = document.documentElement;
console.log(doc.parentNode); // null
console.log(doc.parentElement); // null

区别2：获取非元素节点的返回值不同

parentNode 是从一个节点继承而来的属性，因此所有节点类型都有该属性。然而，只有元素节点才有 parentElement 属性。如果我们尝试从文本节点或注释节点中获取它们的 parentElement，将会返回 null。

<div>
  <p>Hello, world!</p>
  <!-- This is a comment -->
</div>

const comment = document.querySelector('comment');
console.log(comment.parentNode); // <div></div>
console.log(comment.parentElement); // null

区别3：获取非直接父节点的返回值不同

当我们获取一个节点的父节点或 parentElement 时，它们都只会返回该节点的直接父节点。对于非直接父节点（例如祖先节点），两者的表现也不同。 parentNode 可以一直向上查找，直到找到根节点为止，而 parentElement 只能返回该节点的最近的包含元素。

<div id="grandparent">
  <div id="parent">
    <p>Hello, world!</p>
  </div>
</div>

const p = document.querySelector('p');
console.log(p.parentNode.id); // grandparent
console.log(p.parentElement.id); // parent

区别4：获取样式时的返回值不同

如果我们想要获取一个元素的样式，可以使用 window.getComputedStyle() 方法。此方法需要传入一个元素作为参数。在某些情况下，获取到的结果可能与预期不符。这是因为 getComputedStyle() 方法基于 parentElement 属性来计算结果，而不是 parentNode。

<div id="parent" style="margin: 10px;">
  <div id="child" style="margin: 10px;"></div>
</div>

const child = document.querySelector('#child');
const parent1 = child.parentNode;
const parent2 = child.parentElement;

console.log(getComputedStyle(parent1).margin); // '0px'
console.log(getComputedStyle(parent2).margin); // '10px'

总结

尽管父节点和parentElement具有相似之处，但它们在实际使用中存在区别。了解这

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8610