はじめに
HTMLを取得する三種のJavaScriptメソッドを紹介します。
HTMLの要素を取得する方法としてはid名を指定して取得する方法と、class名を指定して取得する方法と、セレクタ名を取得する方法が存在します。
それでは一つずつ紹介していきます！よろしくお願いします。
document.getElementById("id名")
これは引数に渡したidを持つ要素を取得することができます。
//id名がhogeの要素を指定する場合
document.getElementById("hoge")
この場合はhogeというid名のHTMLの要素を取得することができます。
document.getElementsByClassName("class名")
使い方はidを使って取得する方法と同じですが、このメソッドの名前のなかのElementsが複数形になっていることに気をつけましょう。
idとの使い分けとしては、HTMLの中で同じ名前のidは存在できないので取得する要素は一つだけになります。
しかし、classはHTMLで複数同じ名前が存在する可能性があるので、それら全ての要素を取得することができます。Elementsが複数形になっている理由も納得ですね！
//class名がfugaの要素を指定する場合
document.getElementsByClassName("fuga")
document.querySelectorAll("セレクタ名")
セレクタ名はCSSでスタイルを適用するために指定している要素です。CSSでスタイル適応する時はid名や、class名、はたまたタグ名を指定しますよね。つまり、先ほど紹介したメソッドを使わなくても、これで完結するのです。
id名を指定する時は、id名の直前に . をつけます。class名は # をつけます。タグ名はそのままです。
//class名がfugaの要素を指定する場合
document.querySelectorAll(".fuga")
//id名がhogeの要素を指定する場合
document.querySelectorAll("#hoge")
//h1タグの要素を指定する場合
document.querySelectorAll("h1")
おまけ
ちなみに、document.querySelectorAll("セレクタ名")は合致する要素を全て取得してきますが、
document.querySelectorだと、合致する要素のうち一番はじめに見つかった要素を一つだけ取得します。
//id名,class名,タグ名の指定方法は、querySelectorAllメソッドと同じ
document.querySelector("セレクタ名")
最後に
これからオリジナルアプリにこの方法でフロントを実装したいところがありまして、おさらいしてみました。
JavaScriptこれから深めていきたいと思います！！！