我想知道，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使用子节点。我的假设是基于MDN参考:
childNode是对元素节点的第一个子元素的引用，如果没有子元素则为null。
我猜，在速度方面，差异，如果有的话，将是几乎没有，因为firstElementChild是有效的引用子[0]，并且子对象已经在内存中。
让我困惑的是childNodes对象。我用它来查看表格元素中的表单。当children列出所有表单元素时，childNodes似乎也包括HTML代码中的空白:
console.log(elem.childNodes[0]);
console.log(elem.firstChild);
<TextNode textcontion =“\n”>
console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);
>. All log <input type="text"…如何来吗?我可以理解，一个对象允许我使用“原始”HTML代码，而另一个对象则坚持使用DOM，但childNodes元素似乎可以在两个级别上工作。
回到我最初的问题，我的猜测是:如果我想要最全面的对象，那么childNodes是最好的选择，但由于它的全面性，就它在任何给定时刻返回我想要/期望的元素而言，它可能不是最可预测的。在这种情况下，跨浏览器支持也可能是一个挑战，尽管我可能是错的。
谁能说明一下手边这些物体之间的区别?如果有速度差异，无论多么微不足道，我也想知道。如果我看错了，请指教我。
PS:拜托，拜托，我喜欢JavaScript，所以是的，我想处理这类事情。像“jQuery为你处理这个问题”这样的答案不是我想要的，因此没有jQuery标签。
