[解決済み] JavascriptでDOMのノードリストを配列に変換するには?
質問
HTMLノードのリストを受け取るJavascript関数がありますが、Javascriptの配列(その配列に対していくつかのArrayメソッドを実行します)を想定しており、それに
Document.getElementsByTagName
の出力を与え、DOM ノードのリストを返したいのです。
当初は、以下のようなシンプルなものを使おうと考えていました。
Array.prototype.slice.call(list,0)
で返される DOM ノードリストは、どうやら
Document.getElement*
メソッドによって返される DOM ノード リストは、関数呼び出しのターゲットとなるには十分な JScript オブジェクトではないらしいからです。
洞穴です。Internet Explorer固有のコードを書くことは気にしませんが、サードパーティのWebサイトに埋め込むウィジェットを書いているため、JQueryなどのJavascriptライブラリは一切使用できず、クライアントに競合を引き起こす外部ライブラリを読み込むことができません。
私の最後の手段は、DOM ノード リストを繰り返し、自分自身で配列を作成することですが、それを行うより良い方法はありますか?
どのように解決するのですか?
ノードリストは
ホストオブジェクト
を使用すると
Array.prototype.slice
メソッドを使用することは、ECMAScript の仕様では動作保証外です。
slice関数がホストオブジェクトに正常に適用できるかどうかは、実装に依存します。
を反復処理する簡単な関数を作ることをお勧めします。
NodeList
を繰り返し、各
を配列に追加する簡単な関数を作ることをお勧めします。
function toArray(obj) {
var array = [];
// iterate backwards ensuring that length is an UInt32
for (var i = obj.length >>> 0; i--;) {
array[i] = obj[i];
}
return array;
}
UPDATEです。
他の回答が示唆するように、最近の環境ではスプレッド構文または
Array.from
メソッドを使用することができます。
const array = [ ...nodeList ] // or Array.from(nodeList)
しかしよく考えてみると、NodeListをArrayに変換する最も一般的なユースケースは、それを反復処理することだと思うのですが、今、この
NodeList.prototype
オブジェクトには
forEach
メソッドをネイティブで持っています。
というメソッドがあるので、モダンな環境であれば直接使うか、pollyfillを用意すればよいでしょう。
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScript で配列に値が含まれているかどうかを確認するにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] 上級者向けJavaScript。この関数はなぜ括弧でくくられるのですか?重複
-
[解決済み] これは純関数ですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] javascript includes() 大文字小文字を区別しない
-
[解決済み] react-routerのハッシュフラグメントからクエリパラメータを取得する
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる