querySelectorAllの読み方

javascriptで利用されるメソッドの1つである「querySelectorAll」の読み方を掲載してます。

読み⽅

「クエリ・セレクター・オール」と読みます。

英訳

「query」は「質問」という意味があります。

querySelectorAllとは

javascriptで、要素を配列として取得するメソッドとなります。

/ * html */
<ul class="list-group">
  <li class="hoge">a</li>
  <li class="hoge">b</li>
  <li class="hoge">c</li>
  <li class="hoge">d</li>
  <li class="hoge">e</li>
</ul>

/ * js */
function hoge() {
  // クラス名hogeの要素を配列として取得
  var nodelist = document.querySelectorAll('.hoge');
  // 要素の長さを取得
  var len = nodelist.length;
  // 長さの数だけループ処理を行う
  for (var i = 0; i < len; i++) {
    nodelist[i].textContent = i;　// テキストを数値0～4に変更する
  }
}

実行結果