JavascriptのHTMLの取得方法

Javascriptの学習において、DOMツリーからHTMLを取得する方法をまとめました。

DOMツリーとは

DOMとはHTMLを解析し、データを作成する仕組みのことで、ブラウザによって、階層構造のあるデータになります。
これをDOMツリーやドキュメントツリーと呼びます。
JavaScriptを使うと、このDOMツリーを取得することができ、要素を増やしたり、削除したりといった操作が可能になります。

HTMLの取得方法

　HTMLを取得する方法として、大きく以下の３つの方法があります。

• id名から取得する方法
• class名から取得する方法
• セレクタ名から取得する方法

####document.getElementById("id名")
引数に指定したidを持つ要素を取得することができます。

####document.getElementsByClassName("class名")
Elementsと複数形になっているのが注意です。
id名は必ず１つしか存在しないのに対して、class名は同じものが複数存在する場合があるので、複数形になっています。
指定したclass名をとマッチする要素を全て取得することができます。

####document.querySelectorAll("セレクタ名")
セレクタ名で取得する方法で、主にclass名、id名、HTMLタグで指定します。
class名は(".class名")、id名は("#id名")、HTMLタグは("タグ名")で指定することができます。

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

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

//Pタグの要素を指定する場合
document.querySelectorAll("P（タグ名）")

getElementsByClassNameとquerySelectorAllの違い

結論、戻り値が異なります。
getElementsByClassNameはHTMLCollectionというオブジェクト
querySelectorAllはNodeListというオブジェクト
をそれぞれ戻り値として返し、使えるメソッドが異なります。