41
32

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JS】わずか5文字!document.querySelectorAllの返り値を配列に変える方法

Last updated at Posted at 2019-09-13

お前のすべてが欲しい...

**結論を知りたい人はスプレッド構文を使う**へ

HTML内の特定の要素をすべて取得したいというときは document.querySelectorAll を使うと便利です。

.item というクラスをすべて取得したいとき

index.html
 <ul>
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
 </ul>
script.js
const items = document.querySelectorAll('.item');

と、このように簡単にすべての要素が取得できるのです。めでたしめでたし。

・・・が、ひとつ注意点!!

返り値は NodeList

さてこの配列?を操作しようと思ったらここに落とし穴があるのです。返り値は Array ではなく NodeList 。そう、配列ではありません。

NodeList を操作するには

forEach() メソッドを使うのが便利です。

const items = document.querySelectorAll('.item');
items.forEach((item) => {
  console.log(item);
});

だけど配列(Array) にしたい時があるかと思います。

NodeListを配列に変換するには

NodeList | MDN

によると

NodeList は Array とは異なりますが、 forEach() メソッドで処理を反復適用することは可能です。 Array.from() を使うことで Array に変換することができます。

なるほど。 Array.from()メソッド を使えば配列に変換することができるようです。

const items = document.querySelectorAll('.item');
const itemsArray = Array.from(items);

一気に操作したい場合は、

Array.from(document.querySelectorAll('.item'), item => {
 console.log(item);
});

もっと簡単に配列に変換したい

Array.from()メソッドで配列に変換できることはわかりました。ですが、もうちょっと簡単に配列に変換する方法があります。

スプレッド構文を使う

const items = [...document.querySelectorAll('.item')];

なんということでしょう、[].だけで配列に変換できました。

関数化

nodeListToArray.js
const nodeListToArray = nodeList => [...nodeList];

nodeListToArray(document.childNodes); // [ <!DOCTYPE html>, html ]

スプレッド構文とは

スプレッド構文 | MDN

スプレッド構文を使うと、関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。

配列に転換したい場合は、配列の中に iterable なオブジェクトを入れてあげればよいのです簡単ですね。

スプレッド構文の注意点

また、こんなこともMDNのページには書いてありました。

###大量の値を展開する場合セクション
JavaScript エンジンには、引数の個数に上限があります。関数呼び出しでのスプレッド構文では、引数の個数がその上限を超えてしまう可能性に留意してください。詳細は apply()のページを参照してください。

引数に上限があるようなので注意しましょう。

スプレッド構文のブラウザー実装状況

スプレッド構文 ブラウザー実装状況

IEでは動きません・・・
適宜トランスパイルをしましょう。


参考

Document.querySelectorAll() | MDN
Array.from() | MDN
NodeList | MDN
スプレッド構文 | MDN
Converting a NodeList to an array with vanilla JavaScript
querySelectorAllで帰ってきたNodeListを外部ライブラリを使わずにforEachしたい
nodeListToArray - 30 seconds of code

41
32
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
41
32

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?