konakona-engineers diary

新米エンジニアのプログラミングブログ

JavaScriptでHTMLの要素を取得し操作する方法

DOMツリーからHTMLを取得する方法

※DOMツリーについては以下のURLを参照

ja.javascript.info

 

 

HTMLの取得方法は大きく分けて3つ

①id名から取得

②class名から取得

セレクタ名から取得(全て取得、最初のみ取得)

 

①〜③を実行するためにはメソッドを使う

要素・セレクタについて復習したい方は以下を参照

 

www.asobou.co.jp

①document.getElementByld("id名")

DOMツリーから特定のHTML要素を取得するためのメソッドの1つ

引数に渡したidを持つ要素を取得する

document.getElementById("id名")
 

②document.getElementsClassName("class名")

※HTML上で同じclassが複数存在する場合があるため「 getElements 」と複数系になっている。同じclass名が複数存在する場合はそれらが持つ要素を全て取得する。

document.getElementsByClassName("class名")
 

③document.querySelectorAll("セレクタ名") ※全て取得 

※「 querySelectorAll 」とあるように、引数に設定しているセレクタ名に合致するモノ全てをHTML上から取得する

 

document.querySelectorAll("セレクタ名")

 

③querySelecor("セレクタ名") ※最初のみ取得

引数で設定したセレクタに合致する要素で最初に見つかった要素1つを取得する

document.querySelector("セレクタ名")

 

 

③頻繁に使用するセレクタ

「class名」、「id名」、「HTMLタグ」この3つを頻繁に使用する

document.querySelectorAll(".class名")
document.querySelector("#id")
document.querySelectorAll("タグ名")