私は単純なループを作ろうとしています：

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

しかし、私は次のエラーを受け取ります：

VM384：53 Uncaught 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.childrenであるNodeListため、オブジェクトのような配列であるタイプ：

• lengthノードの数を示すプロパティが含まれています
• 各ノードは、0から始まる数値名のプロパティ値です。 {0: NodeObject, 1: NodeObject, length: 2, ...}

この記事の詳細をご覧ください。

2番目のオプション：反復可能なプロトコルを使用する

parent.childrenですHTMLCollection：実装する反復可能なプロトコルを。ES2015環境では、HTMLCollection反復可能オブジェクトを受け入れる任意の構造でを使用できます。

HTMLCollectionスプレッドオペレーターで使用：

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

または、spread演算子を使用します。

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

parent.childrenノードリストリスト、厳密にはhtmlコレクションを返します。これはオブジェクトのような配列ですが、配列ではないため、配列関数を直接呼び出すことはできません。このコンテキストでは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は構造のような配列ですが配列ではないため）。

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

の必要forEachはありません。from次のように、の2番目のパラメータのみを使用して反復できます。

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

または、spread演算子を使用します。

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