我想知道,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>迭代的情况下。如果我可能遇到文字元素:
<div>
var child = elem.childNodes; // treat as NodeList var child = elem.firstChild;
据我所知,firstChild使用来自的NodeList childNodes,并firstElementChild使用children。我将这一假设基于MDN参考:
firstChild
childNodes
firstElementChild
children
childNode是对元素节点的第一个子元素的引用,或者null如果不存在。
childNode
null
我猜想,就速度而言,差异(如果有的话)几乎是零,因为firstElementChild实际上是对的引用children[0],并且该children对象无论如何已经在内存中。
children[0]
扔给我的是childNodes物体。我用它来查看表格元素中的表单。虽然children列出了所有表单元素,但childNodes似乎还包含HTML代码中的空格:
console.log(elem.childNodes[0]); console.log(elem.firstChild);
两者都记录 <TextNode textContent="\n ">
<TextNode textContent="\n ">
console.log(elem.childNodes[1]); console.log(elem.children[0]); console.log(elem.firstElementChild);
所有日志<input type="text"… >。怎么来的?我知道一个对象将允许我使用“原始” HTML代码,而另一个对象则坚持使用DOM,但是该childNodes元素似乎在两个级别上都可以工作。
<input type="text"
>
回到我最初的问题,我的猜测是:如果我想要最全面的对象,那childNodes是要走的路,但是由于它的全面性,就返回我想要的元素而言,它可能不是最可预测的期望在任何给定的时刻。在这种情况下,跨浏览器支持也可能是一个挑战,尽管我可能是错的。
谁能澄清一下手头物体之间的区别?如果存在速度差异,但可以忽略不计,我也想知道。如果我发现这一切都不对,请随时教育我。
PS:拜托,拜托,我喜欢JavaScript,是的,我想处理这种事情。诸如“ jQuery为您处理此问题”之类的答案不是我想要的,因此没有jquery标签。
听起来好像您想得太多。你观察到的区别childNodes和children,这是一个childNodes包含所有节点,包括完全由空白的文本节点,而children只是对元素的子节点的集合。真的就是全部。
尽管有几个问题需要注意,但两个集合都没有不可预测的问题:
children,firstElementChild而朋友只是方便,提供了仅限于元素的DOM过滤视图。