JavaScriptでHTMLを取得する
まず、大きく方法は３種類あります。
・id名から取得する方法
・class名から取得する方法
・セレクタ名から取得する方法
これからそれぞれの方法でHTMLの取得方法を説明します。
id名から取得する方法
STEP1
HTMLの取得したい要素に「 id 」を設定
<div class="〇〇" id="〇〇"></div>
STEP2
getElementByIdというメソッドを使います。
document.getElementById("id名")
class名から取得する方法
getElementsByClassNameというメソッドを使う。classの中に要素が複数あってもすべて取得することができます。
document.getElementsByClassName("class名")
セレクタ名から取得する方法
querySelectorAllメソッドを使う。指定したセレクタ名に合致するものをすべて取得します。
document.querySelectorAll("セレクタ名")
また、指定したセレクタに合致する要素のうち一番最初に見つかった要素1つを取得することもできます。querySelectorメソッドを使います。頻繁に使用するセレクタ名として、class名、id名、HTMLタグがある。class名は(".class名")、id名は("#id名")、HTMLタグは("タグ名")と表記する。
document.querySelector("セレクタ名")
【 補足 】
Q.セレクタ名とは？
➟CSSでスタイルを適用するために指定している要素