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个实例，NodeList不是真Array，因此它们不会继承forEach方法。

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

<强> ES5

您可以使用Array中的slice将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);

或者您也可以像spread syntax ...一样使用

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);
});

请参阅A comprehensive dive into NodeLists, Arrays, converting NodeLists and understanding the DOM以获取更好的解释和其他方法。

Answer 2

我参加派对的时间已经很晚了，但是从LOAD DATA LOCAL INFILE 'product.csv' INTO TABLE Products FIELDS TERMINATED BY ',' ENCLOSED BY '"' LINES TERMINATED BY '\n' (sku, name, @description, regularPrice, @customerReviewAverage) SET description = IF(@description='',NULL,@description), customerReviewAverage = IF(@customerReviewAverage='',NULL,@customerReviewAverage); mysql> select * from products; +----------+---------------------------+-------------+--------------+-----------------------+ | sku | name | description | regularPrice | customerReviewAverage | +----------+---------------------------+-------------+--------------+-----------------------+ | 19658847 | Glanzlichter - CD | NULL | 12.99 | 5 | | 19658856 | Glanzlichter - CD | NULL | 6.99 | NULL | | 19658865 | Glanzlichter - CD | NULL | 8.99 | NULL | | 1965886 | Beach Boys '69 - CASSETTE | NULL | 6.99 | 4.5 | +----------+---------------------------+-------------+--------------+-----------------------+ 4 rows in set (0.00 sec)开始，以下内容对我来说似乎是最直接的选择：

element.lastChild.nextSibling === null

Answer 3

以下是使用for-in循环执行此操作的方法。

var children = element.childNodes;

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

Answer 4

尝试使用for循环。它在forEach中出错，因为它是节点nodelist的集合。

或者这应该将node-list转换为数组

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);

Answer 5

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

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

Answer 6

试试这个[逆序遍历]：

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

OR [按顺序遍历]

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

Answer 7

这是一种迭代NodeList的功能性ES6方式。此方法使用Array＆＃39; s 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()和其他数组函数执行相同的操作。）

Answer 8

如果你做了很多这样的事情，那么为自己定义这个功能可能是值得的。

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 );
        }
    };
}

Answer 9

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

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

循环遍历childNodes

9 个答案: