DOM (Document Object Model)

DOMとは
  • Document Object Modelのことです。Javascript などのプログラムからHtmlやXMLなどを操作するための仕組みです。
  • ツリー構造を持っていて、各々をノードと呼ばれる。
  • 利用シーンとしては、

例えばブラウザに表示される文字の色を変更したり、大きくしたりと、Webページの見た目をプログラムで処理をしたい場合があるだろう、しかし何もしていない状態のHTMLファイルではJavaScriptから手を出す事が出来ない。そこでファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めがDOMである。

以下のサイトを参考にさせていただきました。 eng-entrance.com

DOMの参照

DOMはChromeのDevelopperツールのElementで参照可能です。 例えば、以下のように見えます。 この,html,head.body,divなどの各々の要素がNodeにあたります。

f:id:lucky0523:20201016152046p:plain
DOM

DOMの操作

プログラムから各ノードのIDを指定して、操作をすることが可能です。 Javascript の場合、以下でノードの情報を取得できます。

document.getElementById(id);

具体的には、以下のような構文で、IDが"section-2"のカラーをREDに変更することができます。

document.getElementById('section-2').style.color = 'red';