JS中用childNodes获取子元素换行会产生一个子元素
<div id='div1'>
<div id='div2'>
<div id='div3'></div>
</div>
<div class='div2'>
</div>
</div>
这样的代码
$(‘#div1').childNodes.length==>会等于 5哦
要是你把这些代码不换行你就会得到2
$('#div1').childNodes.length
5
$('#div1').childNodes
[text, div#div2, text, div.div2, text]
是的
看到没 换行就产生了一个text
在JavaScript中，`childNodes`属性是用来获取一个节点（如元素节点、文本节点、注释节点等）的所有子节点的集合。然而，一个容易被忽视的细节是，当HTML代码中的子元素之间存在换行时，这些换行会被解析为文本节点，并且会被包含在`childNodes`的列表中。这个问题在描述中已经明确指出，通过一个具体的例子进行了说明。
例如，我们有以下HTML结构：
```html
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
<div class="div2"></div>
</div>
```
这段代码如果按照原样写入，`#div1`的`childNodes`数组将会包含5个元素：两个文本节点（由换行产生），两个`div`元素（`#div2`和`.div2`），以及一个空的文本节点（在`.div2`后面）。可以这样查看这个数组：
```javascript
console.log($('#div1').childNodes);
// 输出: [text, div#div2, text, div.div2, text]
```
如果你将这段HTML代码写在同一行内，没有换行，那么`#div1`的`childNodes`数组将只包含两个元素：`#div2`和`.div2`这两个`div`元素，因为没有了换行产生的文本节点。如下所示：
```html
<div id="div1"><div id="div2"><div id="div3"></div></div><div class="div2"></div></div>
```
相应的JavaScript代码：
```javascript
console.log($('#div1').childNodes.length); // 输出: 2
```
了解这个特性对于进行DOM操作时非常重要，尤其是在遍历子节点或者进行条件判断时。文本节点虽然在视觉上不可见，但它们确实存在于文档中，并可能影响到你的脚本逻辑。因此，如果你不想处理这些换行产生的文本节点，你可以选择使用`children`属性，它仅返回元素节点，不包括文本节点。
```javascript
console.log($('#div1').children()); // 输出: [div#div2, div.div2]
```
`childNodes`是一个包含所有子节点（包括文本节点）的集合，而`children`则只包含元素节点。在进行DOM操作时，应根据实际需求选择合适的属性来获取子元素。对于那些需要忽略文本节点的情况，`children`无疑是一个更好的选择。在编写JavaScript代码时，尤其是涉及到DOM操作时，理解这些细节能够帮助我们写出更精确、更健壮的代码。
