JavaScript不应该忽略空格吗？ Firefox中的节点怪癖

Question

我遇到了这个＆＃34; bug＆＃34;在firefox的最新版本中，我不知道导致这种行为的原因以及哪种结果是正确的。

HTML

<div><h1 id="heading">First Title</h1></div><div><h1>Second Title</h1></div>

的JavaScript

var allDivNodes = document.getElementsByTagName("div");
console.log(allDivNodes[0].childNodes);
console.log(allDivNodes[1].childNodes);

console.log(allDivNodes[0].childNodes.length);
console.log(allDivNodes[1].childNodes.length);

我得到的结果如下：

这就是怪癖。如果我在HTML代码中添加空格并运行相同的脚本，我会得到以下结果：

新HTML。 JavaScript保持不变

    <div>
        <h1 id="heading">First Title</h1>
    </div>
    <div>
        <h1>Second Title</h1>
    </div>

新结果：

我认为JavaScript对白色空间不敏感。那么为什么它将nodeLength从1改为3？

Answer 1

您可以使用children而不是childNodes，因为格式化您引入了一些文本节点（是的，它们是类型3的节点，而不仅仅是一些空格），而childNodes将返回全部它们。

console.log(allDivNodes[0].children.length);

或者使用childNodes，您可以循环并忽略具有nodeType === 3的那些。

同样地，您也有childElementCount，它将为您提供childElement计数，并将忽略文本节点。

Answer 2

  

我认为JavaScript对白色空间不敏感。那么为什么它将nodeLength从1改为3？

Firefox表现正常。

这不是JavaScript问题。 DOM将“仅空白”区域计为文本节点，因此JavaScript正确返回它找到的所有子节点。

较旧的IE表现不同，只会忽略此类空白区域。自IE9以来，这已得到纠正。

基本上，页面中出现的任何内容都表示为DOM节点。

我个人更喜欢压缩我的HTML。它不仅减少了下载时间，而且还减少了占用内存的DOM，减少了不需要的节点。