获取子节点的最佳方法

Question

我想知道，JavaScript提供了多种方法来从任何元素中获取第一个子元素，但是哪种方法最好呢？最好的意思是：在行为方面，大多数跨浏览器兼容，最快，最全面且可预测。我用作别名的方法/属性的列表：

var elem = document.getElementById('container');
var child = elem.children[0];
var child = elem.firstElementChild; // == children[0]

这适用于两种情况：

var child = elem.childNodes[0]; // or childNodes[1], see below

在表单或<div>迭代的情况下。如果我可能遇到文字元素：

var child = elem.childNodes; // treat as NodeList
var child = elem.firstChild;

据我所知，firstChild使用来自的NodeList
childNodes，并firstElementChild使用children。我将这一假设基于MDN参考：

childNode是对元素节点的第一个子元素的引用，或者null如果不存在。

我猜想，就速度而言，差异（如果有的话）几乎是零，因为firstElementChild实际上是对的引用children[0]，并且该children对象无论如何已经在内存中。

扔给我的是childNodes物体。我用它来查看表格元素中的表单。虽然children列出了所有表单元素，但childNodes似乎还包含HTML代码中的空格：

console.log(elem.childNodes[0]);
console.log(elem.firstChild);

两者都记录 <TextNode textContent="\n ">

console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);

所有日志<input type="text"… >。怎么来的？我知道一个对象将允许我使用“原始”
HTML代码，而另一个对象则坚持使用DOM，但是该childNodes元素似乎在两个级别上都可以工作。

回到我最初的问题，我的猜测是：如果我想要最全面的对象，那childNodes是要走的路，但是由于它的全面性，就返回我想要的元素而言，它可能不是最可预测的期望在任何给定的时刻。在这种情况下，跨浏览器支持也可能是一个挑战，尽管我可能是错的。

谁能澄清一下手头物体之间的区别？如果存在速度差异，但可以忽略不计，我也想知道。如果我发现这一切都不对，请随时教育我。

PS：拜托，拜托，我喜欢JavaScript，是的，我想处理这种事情。诸如“
jQuery为您处理此问题”之类的答案不是我想要的，因此没有jquery标签。

Answer 1

听起来好像您想得太多。你观察到的区别childNodes和children，这是一个childNodes包含所有节点，包括完全由空白的文本节点，而children只是对元素的子节点的集合。真的就是全部。

尽管有几个问题需要注意，但两个集合都没有不可预测的问题：

• IE <= 8不包含纯空白文本节点，childNodes而其他浏览器则包含
• IE <= 8内包含注释节点，children而其他浏览器仅包含元素

children，firstElementChild而朋友只是方便，提供了仅限于元素的DOM过滤视图。