【プラグラミング学習】JavaScript上でHTMLの要素を操作する仕組み

DOM(Document Object Model)

• DOMとはHTMLを解析しデータを作成する仕組みです。
  

• HTMLがWebページとして閲覧されるまでの流れ

• HTMLは階層構造で、DOMによって解析されたHTMLは階層構造のあるデータとなります。
  これを、DOMツリーやドキュメントツリーと呼びます。
  -JavaScriptのメソッドを使って、DOMツリーを操作することができます。
  HTMLの要素名、「id、class」といった属性の情報を元にDOMツリーの一部を取得し、
  CSSを変更したり、要素を増やしたり消したりできます。その結果ブラウザに反映され、見た目が変わります。

HTMLを取得する方法

• DOMツリーからHTMLを取得する方法は大きく分けて３つあります。
  
  1.id名から取得する方法
  2.class名から取得する方法
  3.セレクタ名から取得する方法
  

id名から取得する方法

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

document.getElementById("id名")は、DOMツリーから特定のHTMLの要素を取得するための メソッドの一つです。引数に渡したidを持つ要素を取得します。

class名から取得する方法

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

classを指定して取得する場合はこちらを利用します。
注意点としては、getElementsと複数形になっていることです。
id名はhtml上に必ず一つしか無いのに対して、classはHTML上に複数存在することが考えられるためです。

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

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

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

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

セレクタ名とは、CSSでスタイルを適用するために指定している要素です。
セレクタ名を指定して取得する場合、querySelectorAllメソッドを使用します。
最も頻繁に使用するセレクタ名として、class名、id名、HTMLタグになります。
それぞれの書き方は上記の通りになります。

• class名は(".class名")
  
• id名は("#id名")
  
• HTMLタグは("タグ名")
  

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

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