parentelement parentnode

“parentelement”和”parentnode”是两个用于描述HTML元素在DOM树中位置的术语。

在JavaScript中，parentNode和parentElement是两个经常被用来操作DOM（文档对象模型）的常见属性，它们都可以用来获取一个元素的父元素，但是它们的使用场景和返回值有所不同，本文将详细介绍parentNode和parentElement的区别。

1、定义

parentNode是一个通用的属性，它可以用来获取任何节点的父节点，这个属性返回的是一个节点，可以是元素节点、文本节点、注释节点等。

parentElement是一个专门用于获取元素节点父元素的属性，这个属性返回的也是一个元素节点。

2、兼容性

parentNode是一个标准的属性，几乎所有的浏览器都支持，而parentElement是一个非标准的属性，只有部分现代浏览器支持，如Chrome、Firefox、Safari等，在使用parentElement时，需要考虑到浏览器兼容性问题。

3、返回值

parentNode返回的是一个节点，可以是元素节点、文本节点、注释节点等，而parentElement返回的是一个元素节点，这意味着，如果一个元素的父节点不是一个元素节点，那么parentElement将返回null。

4、示例

下面通过一个简单的示例来说明parentNode和parentElement的区别：

<!DOCTYPE html>
<html>
<head>
<style>
  div {
    color: red;
  }
</style>
</head>
<body>
<p id="p1">这是一个段落。</p>
<div id="div1">这是一个div。</div>
<script>
  var p = document.getElementById("p1");
  var div = document.getElementById("div1");
  console.log(p.parentNode); // 输出：[object HTMLBodyElement]
  console.log(p.parentElement); // 输出：null
  console.log(div.parentNode); // 输出：[object HTMLBodyElement]
  console.log(div.parentElement); // 输出：[object HTMLBodyElement]
</script>
</body>
</html>

在这个示例中，我们有一个段落元素和一个div元素，段落元素的父元素是一个body元素，而div元素的父元素也是body元素，我们可以看到，当使用parentNode时，无论是段落元素还是div元素，都可以正确地获取到body元素；而当使用parentElement时，只有当父元素是一个元素节点时，才能正确获取到父元素，否则返回null。

5、总结

parentNode和parentElement都是用来获取一个元素的父元素的属性，但它们之间有一些区别：

parentNode是一个通用的属性，可以获取任何节点的父节点；而parentElement是一个专门用于获取元素节点父元素的属性。

parentNode返回的是一个节点，可以是元素节点、文本节点、注释节点等；而parentElement返回的是一个元素节点。

parentNode在所有浏览器中都支持；而parentElement只有部分现代浏览器支持。

当一个元素的父节点不是一个元素节点时，parentElement将返回null。