[解決済み] 子ノードをループする
質問
このように子ノードをループさせようとしています。
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 の理解に関する包括的なダイブ を参照してください。
関連
-
[解決済み] JavaScriptのオブジェクトをループスルーまたは列挙するにはどうすればよいですか?
-
[解決済み] forEachループでasync/awaitを使用する
-
[解決済み] Bashでファイルの中身をループする
-
[解決済み] オブジェクトをメンバーとして、プレーンなJavaScriptオブジェクトをループさせる方法
-
[解決済み] React JSX内のループ
-
[解決済み] C#のループ - breakとcontinue
-
[解決済み] forループを壊さずに配列をループして項目を削除する
-
[解決済み] JSのDateからDay名
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] 各オブジェクトに?重複
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法