JavaScriptでID名に一致する要素を取得するのに便利なdocument.getElementByIdメソッドの使い方

ID名を指定して要素を取得する

JavaScriptでID名に一致する要素を取得するには、document.getElementById()メソッドが便利です。

document.querySelector()でも同様の処理は可能ですが、document.getElementById()の方が処理速度が早いので、私はこちらをメインで使用しています。

メソッド

メソッド意味返り値
document.getElementById(【ID名】)ID名に一致する要素を取得する要素(HTMLElement)
document.getElementById()

サンプルコード

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

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

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

コメントを残す