JavaScript - セレクタ名に一致する要素を取得する

Document.querySelectorAll()

document.querySelectorAll() メソッドは、与えられた CSS セレクタに一致する文書中の要素のリストを返します。document.querySelectorAll の構文は以下のとおりです。

elementList = parentNode.querySelectorAll(selectors);
document.querySelectorAll() メソッド
selectors
マッチのための1つ、または複数のセレクタを含む DOMString です。この文字列は妥当な CSS セレクタでなければならず、そうでない場合は SyntaxError 例外がスローされます。複数のセレクタを指定する際は、カンマで区切ります。

以下の例では、文書内にある note または alert のいずれかのクラスを持つ、すべての div 要素のリストを返します。

var matches = document.querySelectorAll("div.note, div.alert");
document.querySelectorAll() メソッド

document.querySelectorAll() メソッドの返り値は、指定されたセレクタの少なくとも一つに一致する要素ごとに Element を一つずつ含む NodeList です。一致するものがなければ空の NodeList を返します。

一致した要素の NodeList は、配列表記を使ってリストの内容にアクセスすることができます。以下のように、任意の一般的なループ処理を使うことができます。

var items = document.querySelectorAll(".item");

items.forEach(function(item) {
  console.log(item);
});
document.querySelectorAll() メソッド
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
8123.513.210
○:Support ×:Not Support ?:未定義 n:以降の Version で Support

関連記事

Category:
プログラミング
公開日:
更新日:
Pageviews:
15
Shares:
2
Tag:
JavaScript
コードレシピ