動かざることバグの如し

近づきたいよ 君の理想に

querySelectorAll()で取得した要素をeachで回す５つの方法

javascript

例えばhttps://github.com/のような普通のページがあって、そのページ内の全リンクを取得してforeach的な何かで順番に処理していきたいということは全然あると思う。

取得自体は簡単で

const links = document.querySelectorAll('a');

で可能。が、流石JS、簡単にはいかなくて、これを回すとなると難しい。document.querySelectorAll()で返ってくるNodeListオブジェクトは単純な配列ではないからである。

ここではNodeListをなんとかしてeachするやり方を残す。

方法１ forのループを使う

いつものって感じ

var links = document.querySelectorAll('a');
for (var i = 0; i < links.length; i++) {
    console.log(links[i].href);
}

メリット

  • 全ブラウザで動作する

デメリット

  • きれいな書き方ではない。。。

方法２ for ofで回す

for ofは最近の記法で「イテレータの中身を1つずつ取り出して処理」ができる。そのイテレータにNodeListも含んでいるので、ループ処理で回すことができる。

const links = document.querySelectorAll('a');
  for (const link of links) {
    console.log(link.href);
  }

メリット

  • IEを除くブラウザで対応している
  • ナウい

デメリット

  • IE非対応（１１ですら）

方法３ NodeListのKey,Valueを取得して回す

どういうことかというと、サンプルコードを見たほうが早い。

const links = document.querySelectorAll('a');
for (const link of links.values()) {
  console.log(link.href);
};

values()でイテレータ化してそれを for ofで回す。

以下はkeys()、entries()で回す例。正直方法２より面倒になっているだけな気もするが、index番号も取得できるのはメリットかも知れない。

const links = document.querySelectorAll('a');
for (const i of links.keys()) {
  console.log(links[i].href);
};

const links = document.querySelectorAll('a');
for (const link of links.entries()) {
  console.log(link[1].href);
};

メリット

  • indexが取れる

デメリット

  • 方法２より複雑
  • IE非対応（１１ですら）

方法４　foreachを使う

実はNodeListオブジェクト自体に独自のforEach()メソッドがある。

const links = document.querySelectorAll('a');
links.forEach(link => {
  console.log(link.href);
});

メリット

  • きれい

デメリット

  • IE非対応（１１ですら）

方法５ スプレッド構文を使う

ES6に導入されたスプレッド構文で、NodeListオブジェクトを配列に変換する方法

const links = document.querySelectorAll('a');
[...links].forEach(link => {
  console.log(link.href);
});