JavaScriptでセレクター名に一致する要素を全て取得するのに便利なdocument.querySelectorAll()メソッドの使い方

セレクター名に該当する要素を全て取得する

JavaScriptでセレクター名に一致する要素を全て取得するにはdocument.querySelectorAll()メソッドが便利です。

document.querySelectorAll()はCSSと同じ書き方でセレクター指定ができるので、CSSを利用するユーザー には好まれています。

返り値は配列になります。

メソッド

メソッド意味返り値
document.querySelectorAll(セレクター) セレクタールールに該当する要素を全て取得する要素(HTML Element)の配列
document.querySelectorAll()メソッド

サンプルコード

サンプルコードとして、メソッドで該当する要素を全て取得して、文字列を書き換えるコードを紹介します。

Output
Hello JavaScript
  • リスト1
  • リスト2
  • リスト3
Pug
#targetArea Hello JavaScript
	ul.targetList
		li.list-item リスト1
		li.list-item リスト2
		li.list-item リスト3
SCSS
ul.targetList {
	li {
		list-style-position: inside;
	}
}
JavaScript
const targetListItem = document.querySelectorAll('.list-item');

//全ての要素のテキストを変更
targetListItem.forEach((targetList) => {
	targetList.textContent = 'Hello World';
});

なお、複数ある場合に最初の1つにだけ処理を適用したい場合はdocument.querySelector()メソッドを使うこともできます。

インストラクター
コメント

コメントを残す