循环遍历childNodes

Question

我正在尝试像这样循环遍历childNodes:

var children = element.childNodes;
children.forEach(function(item){
    console.log(item);
});

但是,它Uncaught TypeError: undefined is not a function由于forEach功能而输出.我也尝试使用children而不是childNodes改变.

有人知道发生了什么吗？

Answer 1

变量children是一个NodeList实例,而NodeLists不是真的Array,因此它们不会继承该forEach方法.

也有一些浏览器实际上支持它 nodeList.forEach

ES5

您可以使用slicefrom Array转换NodeList为正确的Array.

var array = Array.prototype.slice.call(children);

您也可以简单地使用它作为上下文call调用forEach并传递它NodeList.

[].forEach.call(children, function(child) {});

ES6

您可以使用该from方法将您NodeList转换为Array.

var array = Array.from(children);

或者您也可以像这样使用扩展语法...

let array = [ ...children ];

可以使用的hack是NodeList.prototype.forEach = Array.prototype.forEach,然后您可以使用forEach任何,NodeList而无需每次都转换它们.

NodeList.prototype.forEach = Array.prototype.forEach
var children = element.childNodes;
children.forEach(function(item){
    console.log(item);
});

或者，您可以这样做：`[].forEach.call(element.childNodes, child => console.log(child))` (2认同)
更酷的 es6 方式：`let items = [ ...children ]` 将把它变成一个数组 (2认同)
将Node方法应用于NodeLists存在一个主要问题:节点列表(如node.childNodes)是实时列表,如果在循环期间操作DOM,NodeList可能会发生变化,这意味着对forEach()的回调不会被调用列表中的每个元素 - 或者比列表中最初的元素更多 - 导致不可预测的结果.最好在循环之前将NodeList转换为数组. (2认同)

Answer 2

我参加派对的时间已经很晚了,但是从那以后element.lastChild.nextSibling === null,以下似乎是我最直接的选择:

for(var child=element.firstChild; child!==null; child=child.nextSibling) {
    console.log(child);
}

Answer 3

这是你如何用for-in循环来做到这一点.

var children = element.childNodes;

for(child in children){
    console.log(children[child]);
}

你忘记了检查:if(children.hasOwnProperty(child)){// code here}或者你将迭代不需要的道具,如"长度"等等! (11认同)
更好的是:使用`for ... of ...',虽然它是ES6语法. (4认同)

Answer 4

const results = Array.from(myNodeList.values()).map(parser_item);

NodeList 不是 Array 但 NodeList.values() 返回一个 Array Iterator，因此可以将其转换为 Array。

Answer 5

无法抗拒添加另一种方法，使用childElementCount. 它从给定的父元素返回子元素节点的数量，因此您可以循环遍历它。

for(var i=0, len = parent.childElementCount ; i < len; ++i){
    ... do something with parent.children[i]
    }