admin管理员组

文章数量:1128487

I'm trying to make a simple loop:

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

But I get the following error:

VM384:53 Uncaught TypeError: parent.children.forEach is not a function

Even though parent.children logs:

What could be the problem?

Note: Here's a JSFiddle.

I'm trying to make a simple loop:

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

But I get the following error:

VM384:53 Uncaught TypeError: parent.children.forEach is not a function

Even though parent.children logs:

What could be the problem?

Note: Here's a JSFiddle.

• javascript
• vue.js
• ecmascript-6

Share Improve this question Follow edited Apr 11, 2024 at 0:42 ggorlen 56.6k77 gold badges109109 silver badges148148 bronze badges asked Mar 13, 2016 at 12:03 wycwyc 55.2k8181 gold badges254254 silver badges435435 bronze badges 4

• Same problem occurs with element.siblings – Daut Commented Aug 3, 2018 at 14:23
• @Daut yes because element.siblings returns an HTMLCollection and HTMLCollections do not have the forEach() method – Freddo Commented Jul 20, 2019 at 21:07
• 30 hey you, google searcher! if you're reading this double check that it's forEach with a capital E instead of foreach.... – Robert Sinclair Commented May 9, 2020 at 5:29
• I ended up using a for loop. – tolache Commented Nov 2, 2022 at 17:12

Add a comment  | 

13 Answers 13

Sorted by: Reset to default 230

First option: invoke forEach indirectly

The parent.children is an Array like object. Use the following solution:

const parent = this.el.parentElement;

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

The parent.children is NodeList type, which is an Array like object because:

• It contains the length property, which indicates the number of nodes
• Each node is a property value with numeric name, starting from 0: {0: NodeObject, 1: NodeObject, length: 2, ...}

See more details in this article.

---

Second option: use the iterable protocol

parent.children is an HTMLCollection: which implements the iterable protocol. In an ES2015 environment, you can use the HTMLCollection with any construction that accepts iterables.

Use HTMLCollection with the spread operatator:

const parent = this.el.parentElement;

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

Or with the for..of cycle (which is my preferred option):

const parent = this.el.parentElement;

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

parent.children is not an array. It is HTMLCollection and it does not have forEach method. You can convert it to the array first. For example in ES6:

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

or using spread operator:

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

A more naive version, at least you're sure that it'll work on all devices, without conversion and ES6 :

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

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

parent.children will return a node list list, technically a html Collection. That is an array like object, but not an array, so you cannot call array functions over it directly. At this context you can use Array.from() to convert that into a real array,

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

parent.children is a HTMLCollection which is array-like object. First, you have to convert it to a real Array to use Array.prototype methods.

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

You can check if you typed forEach correctly, if you typed foreach like in other programming languages it won't work.

There is no need for the forEach, you can iterate using only the from's second parameter, like so:

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

If you are trying to loop over a NodeList like this:

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

I highly recommend loop it this way:

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

Personally, I've tried several ways but most of them didn't work as I wanted to loop over a NodeList, but this one works like a charm, give it a try!

The NodeList isn't an Array, but we treat it as an Array, using Array. So, you need to know that it is not supported in older browsers!

Need more information about NodeList? Please read its documentation on MDN.

That's because parent.children is a NodeList, and it doesn't support the .forEach method (as NodeList is an array like structure but not an array), so try to call it by first converting it to array using

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

Since you are using features of ES6 (arrow functions), you may also simply use a for loop like this:

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

use JSON.parse()

str_json = JSON.parse(array);
str_json.forEach(function (item, index) {
    console.log(item);
});

You can use childNodes instead of children, childNodes is also more reliable considering browser compatibility issues, more info here:

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

or using spread operator:

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

for object try this:

  Object.keys(yourObj).forEach(key => {
    console.log(key, yourObj[key]);
  });

本文标签： vuejsforEach is not a function error with JavaScript arrayStack Overflow