Element.querySelectorの条件指定はCSSセレクタと一緒

JavascriptのquerySelectorquerySelectorAll
特定条件に一致する要素を取得できます。

querySelectorは、該当した最初の要素を
querySelectorAllでは該当する全てをNodelist(配列ではないところに注意)で返してくれます。

書式はこのように、selectorsで取得したい要素の条件を指定するのですが
selectorsの部分は、CSSのセレクタと同じ書式です

elementList = parentNode.querySelectorAll(selectors);

参考: Document.querySelectorAll() – Web API | MDN

メジャーどころでいくと、こんな感じになりますが
CSSセレクタで実現できる条件なら、なんでも指定できます。

var paragraph = document.querySelectorAll('p');

たとえば、解説ページの例文ではあまり見かけないパターン
〜ではない、NOT条件にしたいときは:not()が使えます。

var validItem = document.querySelectorAll('.item:not([aria-hidden="true"])');

checkboxやradioのような共通点がある要素なら、
工夫すれば、いったんquerySelectorAllで取得したNodelistを配列に変換し、filterをかけずとも
querySelectorAllのみ一発で兄弟を取得できます。

var $siblings = document.querySelectorAll('input[name="' + e.currentTarget.getAttribute('name') + '"]:not([value="' + e.currentTarget.value + '"])');

この方法を活用してアコーディオンを作ってみました。

関連記事