1. ホーム
  2. javascript

[解決済み] JavascriptでDOMのノードリストを配列に変換するには?

2022-09-29 11:10:27

質問

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を用意すればよいでしょう。