Estoy tratando de hacer un bucle simple:

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

Pero me sale el siguiente error:

VM384: 53 Error de tipo no capturado: parent.children.forEach no es una función

Aunque los parent.childrenregistros:

¿Cual podría ser el problema?

Nota: Aquí hay un JSFiddle .

Primera opción: invocar forEach indirectamente

El parent.childrenes un objeto tipo Array. Use la siguiente solución:

const parent = this.el.parentElement;

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

El tipo parent.childrenes NodeList, que es un objeto tipo Array porque:

• Contiene la lengthpropiedad, que indica el número de nodos.
• Cada nodo es un valor de propiedad con nombre numérico, comenzando desde 0: {0: NodeObject, 1: NodeObject, length: 2, ...}

Ver más detalles en este artículo .

Segunda opción: usar el protocolo iterable

parent.childrenes un HTMLCollection: que implementa el protocolo iterable . En un entorno ES2015, puede usarlo HTMLCollectioncon cualquier construcción que acepte iterables.

Usar HTMLCollectioncon el operador de propagación:

const parent = this.el.parentElement;

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

O con el for..ofciclo (que es mi opción preferida):

const parent = this.el.parentElement;

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

parent.childrenNo es una matriz. Es una colección HTMLC y no tiene forEachmétodo. Puedes convertirlo a la matriz primero. Por ejemplo en ES6:

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

o usando el operador de propagación:

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

parent.childrendevolverá una lista de lista de nodos , técnicamente una colección html . Esa es una matriz como objeto, pero no una matriz, por lo que no puede llamar directamente a las funciones de matriz sobre ella. En este contexto, puede usar Array.from()para convertir eso en una matriz real,

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

Una versión más ingenua , al menos está seguro de que funcionará en todos los dispositivos, sin conversión y ES6:

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

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

parent.childrenes un HTMLCollectionobjeto tipo matriz. Primero, debe convertirlo en un método real Arraypara usar Array.prototype.

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

Esto se debe a que parent.childrenes una NodeList y no es compatible con el .forEachmétodo (ya que NodeList es una estructura similar a una matriz pero no una matriz), por lo tanto, intente llamarla primero convirtiéndola en matriz usando

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

No hay necesidad deforEach , puedes iterar usando solo el fromsegundo parámetro de la siguiente manera:

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

Si está tratando de recorrer un sitio NodeListcomo este:

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

Recomiendo encarecidamente bucle de esta manera:

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

Personalmente, he intentado varias formas, pero la mayoría de ellas no funcionaron, ya que quería hacer un bucle NodeList, pero esta funciona como un encanto, ¡pruébalo!

No NodeListes una matriz, pero la tratamos como una matriz, por lo Array.tanto, debe saber que no es compatible con navegadores antiguos.

¿Necesita más información sobre NodeList? Por favor lea su documentación en MDN .

Como está utilizando las funciones de ES6 ( funciones de flecha ), también puede simplemente usar un bucle for como este:

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

Puedes verificar si escribiste correctamente para Cada , si escribiste foreach como en otros lenguajes de programación, no funcionará.

Puede usar en childNodeslugar de children, childNodestambién es más confiable teniendo en cuenta los problemas de compatibilidad del navegador, más información aquí :

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

o usando el operador de propagación:

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