获取子节点的最佳方法

我想知道，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);

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

当前回答

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

这两个系列都没有什么不可预测的，尽管有几个问题需要注意:

IE <= 8没有在childnode中包含纯空白文本节点，而其他浏览器有 IE <= 8在子浏览器中包含注释节点，而其他浏览器只有元素

children, firstElementChild和friends只是为了方便，呈现了DOM的过滤视图，仅限于元素。

2012-04-30 09:52:45

其他回答

为了补充其他答案，这里仍然存在值得注意的差异，特别是在处理<svg>元素时。

我使用过. childnodes和.children，并且更喜欢使用.children getter提供的HTMLCollection。

然而，今天我遇到了IE/Edge在<svg>上使用.children时失败的问题。虽然IE中在基本HTML元素上支持.children，但在文档/文档片段或SVG元素上不支持。

对我来说，我可以简单地通过. childnodes [n]获取所需的元素，因为我不需要担心多余的文本节点。您也可以做到这一点，但是正如上面所提到的，不要忘记您可能会遇到意想不到的因素。

希望这对那些试图弄清楚为什么.children在现代IE中在js的其他地方工作而在文档或SVG元素上失败的人有帮助。

2016-06-21 17:44:57

不要让空白迷惑你。只需在控制台浏览器中测试即可。

使用本地javascript。这里有一个例子，两个'ul'集具有相同的类。你不需要让你的'ul'列表都在一行中，以避免空白，只需使用你的数组计数跳过空白。

如何绕过空白querySelector()然后childNodes[] js小提琴链接:https://jsfiddle.net/aparadise/56njekdo/

var y = document.querySelector('.list');
var myNode = y.childNodes[11].style.backgroundColor='red';

<ul class="list">
    <li>8</li>
    <li>9</li>
    <li>100</li>
</ul>

<ul class="list">
    <li>ABC</li>
    <li>DEF</li>
    <li>XYZ</li>
</ul>

2016-03-27 06:06:00

跨浏览器的方法是使用childNodes来获取NodeList，然后用nodeType ELEMENT_NODE创建一个所有节点的数组。

/**
 * 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都支持scope。

2014-11-24 10:18:54

这两个系列都没有什么不可预测的，尽管有几个问题需要注意:

IE <= 8没有在childnode中包含纯空白文本节点，而其他浏览器有 IE <= 8在子浏览器中包含注释节点，而其他浏览器只有元素

children, firstElementChild和friends只是为了方便，呈现了DOM的过滤视图，仅限于元素。

2012-04-30 09:52:45

在IE<9中firstElementChild可能不可用(只有firstChild)

在IE<9上，firstChild是firstElementChild，因为MS DOM (IE<9)不存储空文本节点。但如果你在其他浏览器上这样做，它们将返回空文本节点…

我的解决方案

孩子= (elem.firstElementChild | | elem.firstChild)

这将在IE<9时给出第一个子元素

2012-04-30 09:33:39

获取子节点的最佳方法

推荐文章

最新文章

标签