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

セレクター名から1つの要素を取得する

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

ただし、別ページで紹介しますが、getElementByID()メソッドやgetElementoByClassName()メソッドの方が処理は早いので、使える時はこれらを使用する方が良いです。

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

メソッド

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

サンプルコード

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

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 targetArea = document.querySelector('#targetArea');
targetArea.textContent = 'Hello World';

ちなみに、セレクターに該当する要素が複数あった場合、最初に該当する要素に対してのみ処理が適用されます。以下のサンプルコードをご覧ください。

Output
Hello JavaScript
  • リスト1
  • リスト2
  • リスト3
Pug
#targetArea2 Hello JavaScript
	ul.targetList2
		li.list-item2 リスト1
		li.list-item2 リスト2
		li.list-item2 リスト3
SCSS
ul#targetList2 li {
  list-style-position: inside;
}
JavaScript
const targetListItem = document.querySelector('.list-item2');
targetListItem.textContent = 'Hello World';

HTML上には.list-itemに該当する要素が3つあるはずですが、文字の書き換えを受けているのは一番最初に該当したリストのみです。

このように、セレクターに該当する要素が複数ある場合は複数ある場合は最初の1つだけが対象になる点に注意してください。

なお、複数ある場合に全ての要素に処理を適用したい場合はdocument.querySelectorAll()メソッドを使います。

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

コメントを残す