Estou tentando fazer um loop simples:

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

Mas eu recebo o seguinte erro:

VM384: 53 Tipo não detectadoErro: parent.children.forEach não é uma função

Mesmo que os parent.childrenlogs:

Qual poderia ser o problema?

Nota: Aqui está um JSFiddle .

Primeira opção: invocar forEach indiretamente

O parent.childrené um objeto parecido com uma matriz. Use a seguinte solução:

const parent = this.el.parentElement;

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

O tipo parent.childrené NodeList, que é um objeto semelhante a uma matriz porque:

• Ele contém a lengthpropriedade, que indica o número de nós
• Cada nó é um valor de propriedade com nome numérico, começando em 0: {0: NodeObject, 1: NodeObject, length: 2, ...}

Veja mais detalhes neste artigo .

Segunda opção: use o protocolo iterável

parent.childrené um HTMLCollection: que implementa o protocolo iterável . Em um ambiente ES2015, você pode usar o HTMLCollectioncom qualquer construção que aceite iteráveis.

Use HTMLCollectioncom o operador spread:

const parent = this.el.parentElement;

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

Ou com o for..ofciclo (que é minha opção preferida):

const parent = this.el.parentElement;

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

parent.childrennão é uma matriz. É HTMLCollection e não possui forEachmétodo. Você pode convertê-lo para a matriz primeiro. Por exemplo, no ES6:

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

ou usando o operador spread:

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

parent.childrenretornará uma lista de lista de nós , tecnicamente uma coleção html . Essa é uma matriz como objeto, mas não uma matriz, portanto, você não pode chamar funções de matriz diretamente sobre ele. Nesse contexto, você pode usar Array.from()para converter isso em uma matriz real,

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

Uma versão mais ingênua , pelo menos você tem certeza de que funcionará em todos os dispositivos, sem conversão e ES6:

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

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

parent.childrené um HTMLCollectionobjeto que é do tipo matriz. Primeiro, você deve convertê-lo em real Arraypara usar Array.prototypemétodos.

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

Isso porque parent.childrené um NodeList e ele não suporta o .forEachmétodo (como NodeList é uma matriz como estrutura, mas não uma matriz), então tente chamá-lo convertendo-o primeiro em matriz usando

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

Não há necessidade deforEach , você pode iterar usando apenas o fromsegundo parâmetro do seguinte modo:

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

Se você está tentando passar por um loop NodeListcomo este:

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

Eu recomendo fazer o loop desta maneira:

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

Pessoalmente, eu tentei de várias maneiras, mas a maioria delas não funcionou como eu queria passar por uma NodeList, mas essa funciona como um encanto, experimente!

O NodeListnão é um array, mas o tratamos como um array, usando Array.Então, você precisa saber que ele não é suportado em navegadores mais antigos!

Precisa de mais informações NodeList? Por favor, leia sua documentação no MDN .

Como você está usando os recursos do ES6 ( funções de seta ), você também pode simplesmente usar um loop for como este:

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

Você pode verificar se digitou forEach corretamente, se digitou foreach como em outras linguagens de programação, não funcionará.

Você pode usar em childNodesvez de children, childNodestambém é mais confiável, considerando problemas de compatibilidade do navegador, mais informações aqui :

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

ou usando o operador spread:

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