(JavaScript) document.querySelectorAll()使ってますか?


2019年7月22日

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

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

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

document.querySelectorAll()

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

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

document.querySelectorAll() とは

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

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

みたいな感じですね!

サンプル

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

Untitled-1

まとめ

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

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

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

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

Share Button