javascript - 获取子节点的最佳方法(Best way to get child nodes)

Question

I was wondering, JavaScript offers a variety of methods to get the first child element from any element, but which is the best?(我想知道，JavaScript提供了各种方法来从任何元素中获取第一个子元素，但哪个是最好的？)

By best, I mean: most cross-browser compatible, fastest, most comprehensive and predictable when it comes to behaviour.(最好的，我的意思是：大多数跨浏览器兼容，最快，最全面和可预测的行为。) A list of methods/properties I use as aliases:(我用作别名的方法/属性列表：)

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

This works for both cases:(这适用于两种情况：)

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

That's in case of forms, or <div> iteration.(这是表格或<div>迭代的情况。)

If I might encounter text elements:(如果我可能遇到文本元素：)

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

As far as I can work out, firstChild uses the NodeList from childNodes , and firstElementChild uses children .(据我firstChild ， firstChild使用childNodes的NodeList， firstElementChild使用children 。)

I'm basing this assumption on the MDN reference:(我将这个假设建立在MDN参考上：)

childNode is a reference to the first child element of the element node, or null if there isn't one.(childNode是对元素节点的第一个子元素的引用，如果没有，则为null 。)

I'm guessing that, in terms of speed, the difference, if any, will be next to nothing, since firstElementChild is effectively a reference to children[0] , and the children object is already in memory anyway.(我猜测，就速度而言，差异（如果有的话） firstElementChild没有，因为firstElementChild实际上是对children[0]的引用，并且children对象已经在内存中了。)

What does throw me, is the childNodes object.(扔我的是childNodes对象。)

I've used it to take a look at a form, in a table element.(我用它来查看表格元素中的表单。) While children lists all form elements, childNodes also seems to include whitespace from the HTML code:(虽然children列表列出了所有表单元素，但childNodes似乎也包含HTML代码中的空格：)

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

Both log <TextNode textContent="\n ">(两者都记录<TextNode textContent="\n ">)

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

All log <input type="text" … > .(所有日志<input type="text" ... > 。)

How come?(怎么会？) I'd understand that one object would allow me to work with the “raw” HTML code, while the other sticks to the DOM, but the childNodes element seems to work on both levels.(我知道一个对象允许我使用“原始”HTML代码，而另一个对象坚持使用DOM，但是childNodes元素似乎适用于两个级别。)

To get back to my initial question, my guess would be: if I want the most comprehensive object, childNodes is the way to go, but because of its comprehensiveness, it might not be the most predictable in terms of it returning the element I want/expect at any given moment.(回到我最初的问题，我的猜测是：如果我想要最全面的对象， childNodes是要走的路，但由于它的全面性，它可能不是最可预测的，它返回我想要的元素/期望在任何特定时刻。)

Cross-browser support might also prove to be a challenge in that case, though I could be wrong.(在这种情况下，跨浏览器支持也可能是一个挑战，尽管我可能是错的。)

Could anyone clarify the distinction between the objects at hand?(任何人都可以澄清手头的物体之间的区别吗？)

If there is a speed difference, however negligible, I'd like to know, too.(如果有速度差异，但无论多么微不足道，我也想知道。) If I'm seeing this all wrong, feel free to educate me.(如果我看到这一切都错了，请随时教育我。)

---

PS: Please, please, I like JavaScript, so yes, I want to deal with this sort of thing.(PS：拜托，拜托，我喜欢JavaScript，所以是的，我想处理这类事情。)

Answers like “jQuery deals with this for you” are not what I'm looking for, hence no jquery tag.(像“jQuery为你处理这个问题”这样的答案并不是我想要的，因此没有jquery标签。)   ask by Elias Van Ootegem translate from so

Answer 1

Sounds like you're overthinking it.(听起来像是在思考它。)

You've observed the difference between childNodes and children , which is that childNodes contains all nodes, including text nodes consisting entirely of whitespace, while children is a collection of just the child nodes that are elements.(您已经观察到childNodes和children之间的区别，即childNodes包含所有节点，包括完全由空格组成的文本节点，而children则只是作为元素的子节点的集合。) That's really all there is to it.(这就是它的全部内容。)

There is nothing unpredictable about either collection, although there are a couple of issues to be aware of:(任何一个集合都没有什么不可预测的，尽管有几个问题需要注意：)

• IE <= 8 do not include white space-only text nodes in childNodes while other browsers do(IE <= 8不包括childNodes仅限空格的文本节点，而其他浏览器则包含空格)
• IE <= 8 includes comment nodes within children while other browsers only have elements(IE <= 8包括内注释节点children ，而其它浏览器只具有元件)

children , firstElementChild and friends are just conveniences, presenting a filtered view of the DOM restricted to just elements.(children ， firstElementChild和friends只是方便，呈现DOM的过滤视图，仅限于元素。)