JavaScriptのquerySelectorAllについての質問です

Question

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

const liNode = document.querySelectorAll("li")

JavaScriptで li を複数一気の取得する場合どんなコードがありますか？

※[]でチマチマやるの以外で

Comments

[maisumakun]

liNodeに全部取得できているのですが、そのあと「どう使いたい」のでしょうか？

[tai57]

「EventListener」でclickしたら処理を行う、みたいにしたいです

Answer 1

JavaScriptで li を複数一気の取得する場合どんなコードがありますか？

ご質問に示されている document.querySelectorAll("li") が、現行仕様では最もダイレクトな方法と思います。

返却値は NodeList になりますので、近いコードは、親要素の childNodesプロパティを用いた以下のコードになります。
※childNodesプロパティは、コメントノードやテキストノード（ホワイトスペース）も含みますので厳密には異なります。

const ulChildNodes = document.querySelector("ul").childNodes;

また、返却値が HTMLCollection でも良いなら、

var liElements = document.querySelector("ul").children;

MDN)

• childNodes
• children

---

以下、代替コードで ul を起点とする考え方を示した理由です。

チマチマやる

修正依頼欄の addEventListener より要件を把握しました（できれば、ご質問にも記載されたほうが良いでしょう）。
個々の要素にイベント処理を定義するため、同様な要素を走査するのは正直面倒です。

「EventListener」でclickしたら処理を行う、みたいにしたい（修正依頼コメント欄より

バブリングを活用する

let ulListener; // removeEventListener() 用
document.querySelector("ul").addEventListener("click", ulListener = (evt) => {
  console.log( evt.curentTarget ); // <ul> 要素 : イベント定義した要素
  console.log( evt.curentTarget.children ); // <li> 要素の HTMLCollection
  console.log( evt.target ); //<ul> 以下にある要素 : イベント発火した要素
  console.log( evt.target.closest("li") ); // <li> 要素

  /* 用例 : li要素の active クラス付け替え：全て除去後、必要な要素にのみ付与する
  let
    ul = evt.currentTarget,
    li = evt.target.closest("li") // クリックしたListItem
  ;
  [...ul.children].forEach( li => li.classList.remove("active") )
  li.classList.add("active")
   */

});

イベントリスナが登録された要素数が ul.children.length ではなく、 ul の 1 に抑制できる特徴もあります。
また、ul にイベントを定義しておくと、li 要素を追加したり、除去したりしても、その都度、li 要素にイベントリスナを定義せずに済みます。

イベントリスナに渡される Event（コード内ではevt）で伝搬される情報を利用するのがポイントです。

MDN)

• Event
• currentTarget
• target
• closest()

Answer 2

基本的に、

[]でチマチマやる

しかありませんが、工夫すれば、親要素に対してイベント付与をする、とすれば一応一気に指定できます。
ただし、
イベントを実行した時の対象のliを特定するには、
[]でチマチマやるより、遥かに面倒になります。

なので、通常は、配列メソッドを使います。

// クリックイベントを付与する例

const liNode = document.querySelectorAll("li");

liNode.forEach( el => {
  el.addEventListener('click', () => {
    // 処理
  });
});

// NodeListにforEachがない場合は、下記
[].forEach.call(liNode, function(el){
  el.addEventListener('click', () => {
    // 処理
  });
});