ブラウザ上でJavaScriptが操作しているもの
HTMLの要素はJavaScriptを使うことで操作できます。では、JavaScriptは実際には何を操作しているのでしょうか。
ブラウザ上でJavaScriptはあたかもHTMLファイルやCSSファイルを直接書き換えているように動作しますよね。ですが、JavaScriptを書くときに、要素を取得するにはid名など、それを特定できる名前がわかっていれば十分で、ファイル内の何文字目に書いてあるかなどは指定する必要がありません。
そういったことを実現しているDOMという仕組みがあります。今回はDOMについてご紹介します。
スクリプトがWebページを理解する
HTMLは文書です。JavaScriptが文書に記述された内容、見た目などの変更を行うには、その文書構造をプログラムに理解させる必要があります。
そのためには文書をJavaScript内で扱えるようにしなければなりません。
JavaScriptはオブジェクトをベースにした言語です。JavaScriptにおけるオブジェクトについてはここでは説明しません。別途調べていただくか、以下の記事を参考にしてください。
オブジェクトに文書を変換すればプログラム内で操作できそうです。
ここで登場するのがDOM(Document Object Model)です。DOMは文書をオブジェクトとして表現したものになります。DOMを通してプログラムがWebページを操作できるようになります。
多くのブラウザでは標準仕様に沿うようにDOMが実装されています。
文書を表すそれぞれのオブジェクト
DOMで生成される主要なオブジェクトの種類は以下の通りです。
・Node
・Document
・Element
・NodeList
Node
Nodeは文書内にある全てのオブジェクトの元になるオブジェクトです。フォルダ階層的にたとえるならファイルとフォルダ、２つの概念で共通する部分でしょうか。
つまり継承関係で言う親に当たります。これから紹介するDocument、ElementのふたつはNodeを継承しています。
Document
DocumentはWebページ全体を表します。フォルダ階層にたとえるならCドライブのような一番上の存在です。
以下のように使用します。
const idName = document.getElementById("id-name");Element
Elementは文書内の要素を表します。
以下のコードで変数idNameに代入されるのがElementですね。実際にはElementを親として継承して拡張されたオブジェクトであることが多いです。
const idName = document.getElementById("id-name");NodeList
NodeListは名前の通り要素の配列です。
以下のコードのように扱います。parasがNodeListです。
const paras = document.getElementsByTagName('p');
console.log(paras[0].innerHTML) // 出力: ページ中で最初に書かれているpタグの内容まとめ
ほかにもDOMに存在するオブジェクトはありますが、その都度調べたり存在を意識するだけでも違うと思います。
・Webページをプログラムから操作するためにDOMがある
・DOMは文書をオブジェクトとして表現する
この記事が参考になれば幸いです！