[解決済み] 子ノードをループする

質問

このように子ノードをループさせようとしています。

var children = element.childNodes;
children.forEach(function(item){
    console.log(item);
});

しかし、出力は Uncaught TypeError: undefined is not a function のため forEach という関数があります。また、私は children の代わりに childNodes に変更しましたが、何も変わりませんでした。

どうなっているのか、誰か知っていますか？

どのように解決するのですか？

変数 children は NodeList のインスタンスであり NodeList が真でない場合 Array を継承しないので forEach メソッドを継承しません。

また、いくつかのブラウザは実際にそれをサポートしています nodeList.forEach

ES5

この場合 slice から Array を変換して NodeList を適切な Array .

var array = Array.prototype.slice.call(children);

また、単純に call を呼び出して forEach を呼び出し、それに NodeList をコンテキストとして渡します。

[].forEach.call(children, function(child) {});

ES6

を使用することができます。 from メソッドを使って NodeList を Array .

var array = Array.from(children);

あるいは 拡散構文 ... というように

let array = [ ...children ];

使用できるハックは NodeList.prototype.forEach = Array.prototype.forEach で、その後に forEach を任意の NodeList に変換する必要はありません。

NodeList.prototype.forEach = Array.prototype.forEach
var children = element.childNodes;
children.forEach(function(item){
    console.log(item);
});

参照 NodeList、Array、NodeList の変換、および DOM の理解に関する包括的なダイブ を参照してください。