Selecting Elements By CSS Selector

document.querySelectorAll() は、CSS セレクター文字列に基づいて DOM 要素のリスト (NodeList) を返します。

次のコードは、ドキュメント内のすべての <div> 要素を返します

var divs = document.querySelectorAll('div');Code language: JavaScript (javascript)

次のコードは、クラス error または warning を持つすべての <div> 要素を返します

let divs = document.querySelectorAll("div.error, div.warning");Code language: JavaScript (javascript)

次のHTMLスニペットを参照してください

<div id="container">
   <p class="note">This is a note</p>
   <p class="note">This is another note</p>
   <p class="error">An error message</p>
<div>Code language: HTML, XML (xml)

次のコードは、id が container である別の div の内部にあるクラス note の p 要素のリストを取得します。

let container = document.querySelector("#container");
let matches = container.querySelectorAll("p.note");Code language: JavaScript (javascript)

一致するものが見つかったら、配列のように処理できます。配列が空の場合は、一致するものが見つかりませんでした。

次のコードは、前の例で見つかったクラス note を持つすべての <p> 要素を削除します

matches.forEach(function(match) {
  match.parentNode.removeChild(match);
});Code language: PHP (php)