JavaScriptでHTMLの要素を取得し操作する方法
DOMツリーからHTMLを取得する方法
※DOMツリーについては以下のURLを参照
HTMLの取得方法は大きく分けて3つ
①id名から取得
②class名から取得
③セレクタ名から取得(全て取得、最初のみ取得)
①〜③を実行するためにはメソッドを使う
要素・セレクタについて復習したい方は以下を参照
①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("タグ名")