皆さんこんにちは末ちゃんです。

連日の事件があまりにもショックすぎて、落ち込みます。
そのたび80年代90年代のフォークやロックシンガーが歌っていた日本の未来が顕著に姿を現してきたことを感じます。

ちなみに末ちゃんは90年代生まれです。昭和生まれではありません。

document.querySelectorAll()

さて、本題です。
JavaScriptを書かれている皆さん、document.querySelectorAll() 使ってますか

もしかしてまだ document.getElementByID() や、document.getElementsByClassName() 使ってますか？
いやいや、うちはjQuery全盛期なんだよ今！$(‘.hogehoge’) 最高！って方もいるかもしれません。
しかし今回VanillaJSでのお話しです！jQueryは置いておきます。

document.querySelectorAll() とは

このメソッドは、CSSセレクタに一致するNodeListを返してくれます。
そう、jQueryみたいに ‘.hogehoge’ や ‘#fugafuga .hoge’ みたいな書き方ができます。

また複数ある場合はカンマ区切りで指定できます。

document.querySelectorAll('p');
document.querySelectorAll('.hogehoge');
document.querySelectorAll('.hoge, .fuga');
document.querySelectorAll('.hogehoge .fuga');
document.querySelectorAll('.hogehoge > .fuga');
document.querySelectorAll('.hogehoge[data-fuga]');

みたいな感じですね！

サンプル

もしトグルコンテンツが多数並んでいて、トグルボタンをクリックしたら展開する・・・というようなのを書くとしたらこんな感じですね。

<div class="container">
  <div class="item">
    <button class="item__button">開く</button>
    <div class="item__body">
      <p>
        hogehoge
      </p>
    </div>
  </div>

  <div class="item">
    <button class="item__button">開く</button>
    <div class="item__body">
      <p>
        hogehoge
      </p>
    </div>
  </div>
</div>

.container {
  display: flex;
}

.item {
  flex-basis: 100px;
}

.item__body {
  display: none;
}

.item__body.is-open {
  display: block;
}

const elements = document.querySelectorAll('.item');

elements.forEach(el => {
  const btn = el.querySelector('button');
  const btnLabel = { open: '開く', close: '閉じる' };
  const content = el.querySelector('.item__body');
  const stateClass = 'is-open';
  
  btn.addEventListener('click', () => {
    content.classList.toggle(stateClass);
    if (btn.innerText === btnLabel.open) {
      btn.innerText = btnLabel.close;
    } else {
      btn.innerText = btnLabel.open;
    }
  });
});

まとめ

このメソッドについて詳しくはMDNみてください。
公式・・・ではないですが、どんなものも公式ドキュメントは最強です！

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

え、IEでまた駄目なんでしょう？いやいや、IE8から対応してるんですよ！
babelを通せない案件でも使えます！

それではまたお会いしましょう。