javascript - 获取子节点的最佳方法

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使用 childNodes 中的 NodeList , 和 firstElementChild使用 children .我的假设基于 MDN 引用:

childNode is a reference to the first child element of the element node, or null if there isn’t one.

我猜，就速度而言，差异(如果有的话)几乎没有，因为 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 和 friend 只是方便，呈现仅限于元素的 DOM 过滤 View 。