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

Question

我在最新版本的 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);

或者对于子节点，您可以循环遍历并忽略具有 nodeType === 3 的子节点。

同样你有childElementCount以及这将为您提供 childElement 计数并忽略文本节点。