DOMとは
- Document Object Modelのことです。Javascript などのプログラムからHtmlやXMLなどを操作するための仕組みです。
- ツリー構造を持っていて、各々をノードと呼ばれる。
- 利用シーンとしては、
例えばブラウザに表示される文字の色を変更したり、大きくしたりと、Webページの見た目をプログラムで処理をしたい場合があるだろう、しかし何もしていない状態のHTMLファイルではJavaScriptから手を出す事が出来ない。そこでファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めがDOMである。
以下のサイトを参考にさせていただきました。 eng-entrance.com
DOMの参照
DOMはChromeのDevelopperツールのElementで参照可能です。 例えば、以下のように見えます。 この,html,head.body,divなどの各々の要素がNodeにあたります。
DOMの操作
プログラムから各ノードのIDを指定して、操作をすることが可能です。 Javascript の場合、以下でノードの情報を取得できます。
document.getElementById(id);
具体的には、以下のような構文で、IDが"section-2"のカラーをREDに変更することができます。
document.getElementById('section-2').style.color = 'red';