DOMparentNode 和parentElement 之间的区别

1个回答

写回答

yyyy$

2025-07-10 02:15

+ 关注

DOMparentNode和parentElement都是用来获取元素的父节点的属性，但在使用上有一些差别。

首先，DOMparentNode是一个只读属性，它返回的是元素的父节点，无论父节点是什么类型的节点。而parentElement是一个可读写属性，它返回的是元素的父元素节点，只有当父节点是元素节点时才会返回。

其次，DOMparentNode可以返回任意类型的父节点，包括元素节点、文本节点、注释节点等。而parentElement只能返回父节点是元素节点的情况。

这两个属性的差别在于对于非元素节点的处理上。如果一个元素节点包含了文本节点或注释节点，则DOMparentNode会返回包含这些节点的父节点，而parentElement会返回null。

下面我们来看一个具体的例子来理解它们的区别：

html
<!DOCTYPE html>
<html>
<head>
  <title>DOMparentNode vs parentElement</title>
</head>
<body>
  <div id="parent">
    这是一个段落
    这是文本节点
  </div>
  <script>
    var p = document.querySelector('p');
    console.log(p.parentNode); // 输出div#parent
    console.log(p.parentElement); // 输出div#parent
    var textNode = document.createTextNode('这是文本节点');
    console.log(textNode.parentNode); // 输出div#parent
    console.log(textNode.parentElement); // 输出null
  </script>
</body>
</html>

在上面的例子中，我们首先获取了一个p元素节点，并分别使用了parentNode和parentElement来获取父节点。由于p元素节点的父节点是一个div元素，所以两个属性都返回了div#parent。

接着我们创建了一个文本节点，并再次使用了这两个属性来获取父节点。由于文本节点是div元素的子节点，所以parentNode返回了div#parent，而parentElement返回了null。

这个例子清楚地展示了DOMparentNode和parentElement的差别。DOMparentNode可以获取到任意类型的父节点，而parentElement只能获取到父节点是元素节点的情况。在实际应用中，我们根据具体的需求来选择使用哪个属性来获取父节点。

举报有用（4）分享收藏

DOMparentNode 和parentElement 之间的区别

1个回答

yyyy$

热门话题

相关问题