https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-the-document-getelementsbyclassname-method-that-is-convenient-for-getting-all-the-elements-that-match-the-class-name-in-javascript/
https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-the-document-getelementsbyclassname-method-that-is-convenient-for-getting-all-the-elements-that-match-the-class-name-in-javascript/

JavaScriptでクラス名に一致する要素を全て取得するのに便利なdocument.getElementsByClassName()メソッドの使い方

クラス名に該当する要素を全て取得する

JavaScriptでクラス名に一致する要素を全て取得するにはdocument.getElementsByClassName()メソッドが便利です。

document.querySelectorAll()とできることは同じです。

document.querySelectorAll()はCSSと同じ書き方でセレクター指定ができるので、CSSを利用するユーザー には好まれていますが、こちらの方が処理が早いので、私はこちらをメインに利用しています。

返り値は配列ではなくオブジェクトになりますので、forEach()メソッドなどは利用できないので注意してください。

メソッド

メソッド意味返り値
dodocument.getElementsByClassName(【クラス名】) クラスに該当する要素を全て取得する要素(HTML Collection)のオブジェクト
dodocument.getElementsByClassName()

サンプルコード

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

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.getElementsByClassName('list-item');
//全ての要素のテキストを変更
const targetLength = targetListItem.length;

for ( let index = 0; index < targetLength; index++ ) {
	targetListItem[index].textContent = 'Hello World';
}

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

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

コメントを残す