hasChildNodes vs firstChild

Question

while (div.hasChildNodes()) {
    fragment.appendChild(div.firstChild)
}

while (div.firstChild) {
    fragment.appendChild(div.firstChild)
}

比较上面的两段伪代码，它们都会将div的每个孩子附加到fragment，直到没有更多的孩子。

1. 您何时赞成hasChildNodes或firstChild它们看起来相同。
2. 如果API非常相似，那么为什么它们都存在。当我可以hasChildNodes()从firstChild强制转换为null
时，为什么false存在

Answer 1

a）微优化！

b）虽然这似乎是常见的做法，但我并不喜欢依赖null / non-null值来代替false / true。它是一个节省空间的，在启用服务器压缩时是不必要的（并且有时可以调用微妙的错误）。每次都选择清晰，除非它被证明是造成瓶颈的。

我选择第一个选项，因为它完美地解释了你的意图。

Answer 2

两个实现之间没有功能差异。两者在所有情况下都会产生相同的结果。

如果您想了解两者之间是否存在性能差异，则必须在所需的目标浏览器上运行性能测试，以确定是否存在有意义的差异。

这是两者中的a performance test。它似乎是浏览器特定的，哪一个更快。 Chrome中的hasChildNodes()明显更快，但IE9和Firefox中firstChild的速度要快一点。

Answer 3

由于return，我建议hasChildNodes()超过firstChild;如果hasChildNodes()为空，则false会返回firstChild，null会返回{{1}};它允许您在检查数据是否存在时更有效地解析数据。实际上，这取决于您计划如何操纵DOM以实现结果。

Answer 4

除了一些（可能）微不足道的速度差异之外，你的两个例子通常*行为相同。

支持one over another的唯一理由是清晰度，特别是每个构造代表你的其他代码实现的想法的程度，通过在阅读时是否更容易进行视觉解析来调整代码。我建议尽可能倾向于明确表现或不必要的迂腐正确。

*注意：我假设您在一个模糊的现代浏览器中在网页上运行此代码。如果您的代码需要在其他上下文中运行，则.hasChildNodes（）和.firstChild之间可能存在明显的速度差异甚至功能（副作用）差异：一个需要设置和执行函数调用，另一个需要如果第一个子节点尚未可用，则构造第一个子节点的脚本就绪DOM兼容表示。

Answer 5

假设DOM调用很慢，您可以通过使用firstChild的单个调用进一步优化（以牺牲可读性为代价）：

var child;
while ( (child = div.firstChild) ) {
    fragment.appendChild(child);
}

...虽然（奇怪的是，对我来说）这显然没有任何帮助，并使事情变得更糟，根据这个jsPerf：http://jsperf.com/haschildnodes-vs-firstchild/2

至于为什么两种方法都存在，请记住DOM不是JavaScript独有的。例如，在Java DOM实现中，您必须明确地将firstChild（或更可能firstChild()）与null进行比较。