我试图做一个简单的循环：

const parent = this.el.parentElement
console.log(parent.children)
parent.children.forEach(child => {
  console.log(child)
})

但我收到以下错误：

VM384：53未捕获的TypeError：parent.children.forEach不是一个函数

即使parent.children日志：

可能是什么问题呢？

注意：这是一个JSFiddle。

第一种选择：间接调用forEach

的parent.children是像对象的数组。使用以下解决方案：

const parent = this.el.parentElement;

Array.prototype.forEach.call(parent.children, child => {
  console.log(child)
});

的parent.childrenIS NodeList类型，就像对象，因为数组：

• 它包含 length属性，该属性指示节点数
• 每个节点都是一个具有数字名称的属性值，从0开始： {0: NodeObject, 1: NodeObject, length: 2, ...}

请参阅本文的更多详细信息。

第二种选择：使用可迭代协议

parent.children是一个HTMLCollection：实现可迭代协议。在ES2015环境中，您可以将HTMLCollection搭配任何接受迭代的构造一起使用。

使用HTMLCollection与传播operatator：

const parent = this.el.parentElement;

[...parent.children].forEach(child => {
  console.log(child);
});

或使用for..of循环（这是我的首选）：

const parent = this.el.parentElement;

for (const child of parent.children) {
  console.log(child);
}

parent.children不是数组。它是HTMLCollection，没有forEach方法。您可以先将其转换为数组。例如在ES6中：

Array.from(parent.children).forEach(child => {
    console.log(child)
});

或使用传播运算符：

[...parent.children].forEach(function (child) {
    console.log(child)
});

parent.children将返回节点列表列表，从技术上讲是html Collection。那是一个类似于对象的数组，而不是一个数组，因此您不能直接在其上调用数组函数。在这种情况下，您可以Array.from()用来将其转换为真实数组，

Array.from(parent.children).forEach(child => {
  console.log(child)
})

一个更幼稚的版本，至少您确定它可以在所有设备上运行，而无需转换和ES6：

const children = parent.children;
for (var i = 0; i < children.length; i++){
    console.log(children[i]);
}

https://jsfiddle.net/swb12kqn/5/

parent.children是一个HTMLCollection类似于数组的对象。首先，您必须将其转换为实际Array使用Array.prototype方法。

const parent = this.el.parentElement
console.log(parent.children)
[].slice.call(parent.children).forEach(child => {
  console.log(child)
})

那是因为它parent.children是一个NodeList，并且它不支持该.forEach方法（因为NodeList是一个类似于结构的数组，但不是数组），因此请尝试通过首先使用将其转换为array来调用它

var children = [].slice.call(parent.children);
children.forEach(yourFunc);

有没有必要的forEach，你可以遍历仅使用from的第二个参数，如下所示：

let nodeList = [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]
Array.from(nodeList, child => {
  console.log(child)
});

如果您试图NodeList像这样循环播放：

const allParagraphs = document.querySelectorAll("p");

我强烈建议这样循环：

Array.prototype.forEach.call(allParagraphs , function(el) {
    // Write your code here
})

就个人而言，我尝试了几种方法，但是大多数方法都无法正常工作，因为我想循环 NodeList，但是这种方法就像一种魅力，请尝试一下！

的NodeList不是数组，但是我们使用Array.所以，你需要知道它是不是在旧的浏览器的支持！

需要有关的更多信息NodeList？请阅读其有关MDN的文档。

由于您正在使用ES6的功能（箭头功能），因此您也可以仅使用如下所示的for循环：

for(let child of [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]) {
  console.log(child)
}

您可以检查是否正确键入了forEach，是否像在其他编程语言中一样键入了foreach则无法使用。

考虑到浏览器兼容性问题，您可以使用childNodes代替children，childNodes也更加可靠，有关更多信息，请参见：

parent.childNodes.forEach(function (child) {
    console.log(child)
});

或使用传播运算符：

[...parent.children].forEach(function (child) {
    console.log(child)
});