documentオブジェクトによるHTMLを取得するメソッド

今回はjsのdocumentオブジェクトのDOMを取得するメソッドを学んだので３種類まとめたいと思います。

1. document.getElementByIdメソッド；
2. document.getElementsByClassNameメソッド;
3. document.querySelectorメソッド;

##document.getElementByIdメソッドとは

引数にidを指定することでdomから特定のHTML要素を取得するメソッド一つです。

document.getElementById("id名");

上記のように書くことでマッチするidを持つHTMLの要素を取得します。

##document.getElementsByClassNameメソッドとは

引数にclass名を指定することで同じclassの要素を取得できるメソッドです。

document.getElementsByClassName("クラス名");

ここで一つ気をつけなければいけないのがgetElementByIdと違いclassは複数存在する可能性があるのでgetelementsと複数系にしなければなりません。

##document.querySelectorAllメソッドとは

引数にselectorを指定することで指定した要素を全て取得するメソッドです。

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

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

セレクターでクラス取得するのもgetElementsByClassNameでクラス取得するのも同じじゃねえか！！と思ったんですがquerySelectorALLはNodeListというオブジェクトが返り値となってgetElementsByClassNameはHTMLCollectionが返り値となっている点が違うようです。

HTMLCollectionオブジェクトだと配列になっておらずforeachメソッドを使えないとか。。。

Nodelistオブジェクトは配列になっているためfor eachメソッドも使えるようですね。

オブジェクトを配列の形にできるメソッドもありますがまたまとめます。