获取子节点的最佳方式 [英] best way to get child nodes

问题描述

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

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

对于这两种情况：

  var child = elem.childNodes [0]; //或childNodes [1]，见下文
  

这是表格或div迭代的情况。如果我可能会遇到文本元素：

  var child = elem.childNodes; //处理为Nodelist 
 var child = elem.firstChild; 
  

只要我可以解决， firstChild 使用 childNodes 中的Nodelist，而 firstElementChild 使用 children 。我将这个假设基于MDN参考：

childNode是对元素节点的第一个子元素的引用，如果没有一个。

我猜测，在速度方面的差异，如果有的话，下一个没有什么，因为 firstElementChild 实际上是引用 children [0] ，而 children 对象已经在内存中了。

抛出我的是 childNodes 对象。我已经使用它来查看表单元素中的表单。而 children 列出所有表单元素， childNodes 也似乎包含html代码中的空格：

  console.log（elem.childNodes [0]）; 
 console.log（elem.firstChild）; 
  

两个日志< TextNode textContent =\\\
>

  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标签。

解决方案

就像你正在反思一下。您已经观察到 childNodes 和 children 之间的区别，即 childNodes 包含所有节点，包括完全由空格组成的文本节点，而 children 是作为元素的子节点的集合。这真的是所有的。

尽管有几个问题需要注意：对于这两个集合来说，没有什么不可预知的：

• IE <= 8在 childNodes 中不包括空格空白的文本节点，而其他浏览器则
• 
  
• IE< = 8包含 children 中的注释节点，而其他浏览器只有元素

儿童， firstElementChild ，朋友只是便利，呈现过滤视图的DOM仅限于元素。

I was wondering, JavaScript offers a variety of methods to get the first child element from any element... but which is the best? 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. 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. I'm basing this assumption on the MDN reference:

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

I'm guessing that, in terms of speed the difference, if any, will be next no nothing, since firstElementChild is effectively a reference to children[0], and the children object is already in memory anyway.

What does throw me is the childNodes object. 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:

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

both log <TextNode textContent="\n ">

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

All log <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.

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 it's comprehensiveness, it might not be the most predictable in terms of it returning the element I want/expect at any given moment. 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. answers like 'jQuery deals with this for you' are not what I'm looking for, hence no jQuery tag.

解决方案

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. 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 includes comment nodes within children while other browsers only have elements

children, firstElementChild and friends are just conveniences, presenting a filtered view of the DOM restricted to just elements.

这篇关于获取子节点的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！