childNodes 详解

在JavaScript中，childNodes 是一个属性，属于 Node 对象，它返回一个 NodeList 对象，其中包含了指定 Node 对象下所有类型的子节点。这些子节点可以是元素节点（Element）、文本节点（Text）、注释节点（Comment）等。

使用 childNodes：

 var parentElement = document.getElementById('myElement');
 var childNodes = parentElement.childNodes;

上述代码中，我们首先通过 getElementById 方法获取到一个具有 id 为 myElement 的元素，然后通过 childNodes 属性获取到该元素下所有的子节点集合。

childNodes 的特点：

1. 类型：返回的是一个 NodeList 对象，它是一个动态集合，意味着当DOM结构变化时，NodeList 中的节点也会自动更新。

2. 内容：childNodes 包括所有的子节点，无论它们是元素、文本还是注释。

3. 顺序：NodeList 中的节点顺序与它们在文档中出现的顺序相同。

4. 读取：childNodes 可以被读取，但不能直接修改。要添加或删除子节点，需要使用其他DOM方法，如 appendChild、insertBefore、removeChild 等。

5. 空白文本节点：childNodes 也会返回空白文本节点，这些节点可能由HTML中的多个连续空白字符（如空格、换行符等）产生。

示例：

假设我们有以下HTML结构：

 <div id="myElement">
   <p>Hello, world!</p>
   <p>Another paragraph.</p>
   <!-- 这是一个注释 -->
 </div>

使用JavaScript获取 myElement 的 childNodes：

 var childNodes = document.getElementById('myElement').childNodes;
 console.log(childNodes);

控制台输出的 childNodes 将包含以下类型的节点：

1. 第一个 <p> 元素节点，包含 "Hello, world!" 的文本。

2. 段落 "Hello, world!" 后的空白文本节点（如果有的话）。

3. 第二个 <p> 元素节点，包含 "Another paragraph." 的文本。

4. 注释节点 <!-- 这是一个注释 -->

5. 段落 "Another paragraph." 后的空白文本节点（如果有的话）

请注意，childNodes 并不区分子节点的类型，所以如果你想要获取所有的元素子节点，可以使用 children 属性，它只返回元素类型的子节点。