[JS]HTMLの要素を取得する方法

アウトプットとして

JavaScriptの特徴として「HTMLの要素をJavaScript上で取得し操作する」というのがあるので、HTMLの要素を取得する方法について説明できたらと。

HTMLを取得する

documentオブジェクト

ブラウザ上の情報を操作する事ができるオブジェクトです。
documentオブジェクトを用いてHTMLを取得する方法は大きく分けて3つ

①id名から取得する
②class名から取得する
③セレクタ名から取得する

①id名から取得する

document.getElementById("id名")

DOMツリーから特定のHTMLの要素を取得するためのメソッドの1つです。引数に渡したidを持つ要素を取得します。

例

//id名がhogeの要素を指定する場合
document.getElementById("hoge")

②class名から取得する

document.getElementsByClassName("class名")

classを指定して取得する際に使用します。気をつけたいのは、getElementsと複数形になっていることです。
id名はhtml上に必ず1つしか存在しないため、document.getElementByIdを用いると1つの要素を取得することになります。一方、HTML上に同じclass名を持つ要素は複数存在することが考えられるため、getElementsByClassNameの場合は同じclassを持つ要素を全て取得することになります。

例

//class名がfugaの要素を指定する場合
document.getElementsByClassName("fuga")

③セレクタ名から取得する

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

セレクタ名とは、CSSでスタイルを適用するために指定している要素です。HTML上から、引数で指定したセレクタに合致するものをすべて取得します。

頻繁に使用するセレクタ名として、class名、id名、HTMLタグがあります。
書き方として、class名は(".class名")、id名は("#id名")、HTMLタグは("タグ名")と表記します。

例

//class名がfugaの要素を指定する場合
document.querySelectorAll(".fuga")

//id名がhogeの要素を指定する場合
document.querySelectorAll("#hoge")

//h1タグの要素を指定する場合
document.querySelectorAll("h1")

おまけ

querySelector

querySelectorを用いれば、HTML上から引数で指定したセレクタに合致する要素のうち一番最初に見つかった要素1つを取得することもできます。

例

//id名,class名,タグ名の指定方法は、querySelectorAllメソッドと同じ
document.querySelector("セレクタ名") 

まとめ

・documentオブジェクトはブラウザ上の情報を操作する事ができるオブジェクト。
・documentオブジェクトを用いてHTMLを取得する方法は大きく分けて3つ
①id名から取得する(document.getElementById)
②class名から取得する(document.getElementsByClassName)
③セレクタ名から取得する(document.querySelectorAll)

　
JSの苦手意識の原因として「メソッドが長いのでコードが難しそうに見えること」なので、一つ一つ噛み砕いて読めるようになりたい・・・！
※補足等ありましたらコメントいただけると幸いです。