Js中parentNode,parentElement,childNodes,children之间的区别

Js中parentNode,parentElement,childNodes,children之间的区别

在JavaScript中，我们经常需要访问DOM节点。parentNode、parentElement、childNodes以及children都是常用的访问DOM节点的属性或方法，它们之间有着不同的特点和用法。本文将结合示例来详细讲解这四个属性或方法的区别。

parentNode和parentElement

parentNode和parentElement都是访问节点的父节点的属性，它们之间的区别在于parentElement只能访问元素节点的父节点，而parentNode可以访问任何节点的父节点。

<div id="parent">
  <p id="child">这是一个段落</p>
</div>

let child = document.getElementById('child');
console.log(child.parentNode); // #parent
console.log(child.parentElement); // #parent

在上述示例中，child.parentNode和child.parentElement访问到的都是id为parent的div节点。

另外，使用parentElement的得到的结果可能会比较好理解。比如在上述示例中我们把p标签用span标签替换：

<div id="parent">
  <span id="child">这是一个文本</span>
</div>

let child = document.getElementById('child');
console.log(child.parentNode); // #parent
console.log(child.parentElement); // null

此时child.parentNode仍然可以访问到div节点，而child.parentElement返回的则是null，因为span节点的父节点不是一个元素节点，而是文本节点（因为它只包含了一段文本，而不是完整的标签结构）

childNodes和children

childNodes和children都是访问节点的子节点的属性或方法，但是它们之间还是有区别的。childNodes会返回所有的子节点，而children则会忽略掉非元素节点。

<div id="parent">
  <p id="child1">这是一个段落1</p>
  这是一段文本
  <p id="child2">这是一个段落2</p>
</div>

let parent = document.getElementById("parent");
console.log(parent.childNodes.length); // 5
console.log(parent.children.length); // 2

在上述示例中，parent.childNodes访问到的是parent节点下的所有节点，包括两个p标签和两个文本节点，而parent.children则只返回了两个p标签。