遍历childNodes

我试图像这样遍历childNodes：

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

但是，Uncaught TypeError: undefined is not a function由于forEach功能而输出。我也尝试使用children代替，childNodes但没有任何改变。

有人知道发生了什么吗？

该变量children是一个NodeList实例，并且NodeLists不是true Array，因此它们不继承该forEach方法。

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

ES5

您可以使用slicefromArray将转换NodeList为适当的Array。

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

您也可以简单地使用as上下文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与任何hack一起使用，NodeList而不必每次都进行转换。

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

请参阅深入了解NodeLists，Arrays，转换NodeLists和了解DOM，以获得良好的解释和其他实现方法。

我参加聚会很晚，但是由于element.lastChild.nextSibling === null，以下内容对我来说似乎是最简单的选择：

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

这是使用for-in循环的方法。

var children = element.childNodes;

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

尝试for循环。forEach因为它是节点的集合，所以会产生错误nodelist。

否则这应该将节点列表转换为数组

function toArray(obj) {
  var array = [];
  for (var i = 0; i < obj.length; i++) { 
    array[i] = obj[i];
  }
return array;
}

或者你可以用这个

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

无法拒绝使用添加其他方法childElementCount。它返回给定父级的子元素节点数，因此您可以对其进行循环。

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

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

NodeList不是Array， 但是NodeList.values（）返回一个Array迭代器，因此可以将其转换为Array。

试试这个[逆序遍历]：

var childs = document.getElementById('parent').childNodes;
var len = childs.length;
if(len --) do {
    console.log('node: ', childs[len]);
} while(len --);

或[顺序遍历]

var childs = document.getElementById('parent').childNodes;
var len = childs.length, i = -1;
if(++i < len) do {
    console.log('node: ', childs[i]);
} while(++i < len);

这是在上迭代的功能性ES6方法NodeList。此方法使用Array的方式forEach如下：

Array.prototype.forEach.call(element.childNodes, f)

f迭代器函数在哪里，它接收子节点作为它的第一个参数，而接收索引作为第二个参数。

如果您需要多次遍历NodeLists，则可以基于此创建一个小的函数实用程序方法：

const forEach = f => x => Array.prototype.forEach.call(x, f);

// For example, to log all child nodes
forEach((item) => { console.log(item); })(element.childNodes)

// The functional forEach is handy as you can easily created curried functions
const logChildren = forEach((childNode) => { console.log(childNode); })
logChildren(elementA.childNodes)
logChildren(elementB.childNodes)

（您可以对map()和其他Array函数执行相同的技巧。）

如果您做很多这样的事情，那么可能需要自己定义函数。

if (typeof NodeList.prototype.forEach == "undefined"){
    NodeList.prototype.forEach = function (cb){
        for (var i=0; i < this.length; i++) {
            var node = this[i];
            cb( node, i );
        }
    };
}