获取子节点的最佳方法

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 NodeListvar 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的过滤视图。

Answer 2

IE中可能不提供firstElementChild <9（仅限firstChild）

在IE <9 firstChild是firstElementChild，因为MS DOM（IE <9）没有存储空文本节点。但如果你在其他浏览器上这样做，他们将返回空文本节点......

我的解决方案

child=(elem.firstElementChild||elem.firstChild)

这将使第一个孩子甚至在IE <9上