What is the difference between children and childNodes in JavaScript?

在 JavaScript 中，children 和 childNodes 都是用来获取一个元素的子元素的属性，但主要区别在于它们各自包含的节点类型。

1. childNodes

childNodes 属性返回一个包含指定元素的所有子节点的节点列表（NodeList）。这里的“子节点”包括所有类型的节点，如元素节点、文本节点和注释节点。这意味着如果元素中包含了文本或注释，这些也会作为子节点被 childNodes 返回。

示例： 假设我们有如下HTML结构：

html
<div id="example">
  Hello World!
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

使用 childNodes 获取子节点：

javascript
var example = document.getElementById("example");
console.log(example.childNodes);

这将输出类似于以下的结果，包括文本节点和元素节点：

shell
[
  #text "Hello World!",
  <p>Paragraph 1</p>,
  <p>Paragraph 2</p>
]

2. children

相比之下，children 属性只返回包含元素子节点的集合。它是一个HTMLCollection，仅包括元素类型的子节点，忽略文本节点、注释节点等其他类型的节点。

示例： 使用相同的HTML结构：

html
<div id="example">
  Hello World!
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

使用 children 获取子元素：

javascript
var example = document.getElementById("example");
console.log(example.children);

这将输出：

shell
[
  <p>Paragraph 1</p>,
  <p>Paragraph 2</p>
]

这里不包括 "Hello World!" 文本节点，仅包括<p>元素节点。

总结

总的来说，childNodes 包含所有类型的子节点，而 children 仅包括子元素节点。根据需要处理的具体内容，选择合适的属性是很重要的。在处理DOM时，如果你只关心元素节点而不是文本或其他类型的节点，children 是更为合适的选择。