获取子节点的最佳方法

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

这是表单的情况，或

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

据我所知，firstchild使用子节点中的NodeList，而firstElementChil使用子节点。我的假设基于MDN参考：

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

我猜想，就速度而言，差异（如果有的话）几乎是零，因为firstElementChild实际上是对children[0]的引用，而且children对象已经在内存中了。

我想到的是childNodes对象。我用它来查看表格元素中的表单。当children列出所有表单元素时，childNodes似乎还包含HTML代码中的空白：

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

两个日志

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

所有日志

回到我最初的问题，我的猜测是：如果我想要最全面的对象，childNodes是最好的选择，但由于它的全面性，它可能不是最可预测的，因为它在任何给定时刻返回我想要/期望的元素。在这种情况下，跨浏览器支持可能也是一个挑战，尽管我可能错了。

谁能澄清一下手头物品之间的区别？如果有速度差异，不管有多小，我也想知道。如果我认为这一切都是错的，请随意教育我。

PS：拜托，拜托，我喜欢JavaScript，所以是的，我想处理这类事情。像“jQuery为您处理此问题”这样的答案不是我想要的，因此没有jQuery标记。




Answer 1

跨浏览器的方法是使用childNodes获取NodeList，然后使用nodeTypeELEMENT\u节点创建所有节点的数组。

/**
 * Return direct children elements.
 *
 * @param {HTMLElement}
 * @return {Array}
 */
function elementChildren (element) {
    var childNodes = element.childNodes,
        children = [],
        i = childNodes.length;

    while (i--) {
        if (childNodes[i].nodeType == 1) {
            children.unshift(childNodes[i]);
        }
    }

    return children;
}

http://jsfiddle.net/s4kxnahu/

如果您使用的是一个实用程序库，如lodash:

/**
 * Return direct children elements.
 *
 * @param {HTMLElement}
 * @return {Array}
 */
function elementChildren (element) {
    return _.where(element.childNodes, {nodeType: 1});
}

未来：

您可以将querySelectorAll与：scope伪类结合使用（匹配作为选择器参考点的元素）：

parentElement.querySelectorAll(':scope > *');

在编写本：范围在Chrome、Firefox和Safari中受支持。

Answer 2

firstElementChild可能在IE中不可用

关于IE

我的解决方案

child=（elem.firstElementChild | | elem.firstChild）

这将给第一个孩子甚至在IE上

Answer 3

听起来你想得太多了。您已经观察到childNodes和childrendes之间的区别，即childNodes包含所有节点，包括完全由空格组成的文本节点，而children只是作为元素的子节点的集合。这就是一切。

这两个集合都没有什么不可预测的，尽管有几个问题需要注意：

• IE

children、firstElementChild和朋友只是方便的工具，提供了仅限于元素的DOM过滤视图。