ゼロから始めるJavaScript講座Vol15　DOMとは

ゼロから始めるJavaScript講座DOM

DOM

DOM(DocumentObjectModel)は「HTML文書をオブジェクトして扱えるようにしたもの

HTML文書がブラウザに読み込まれると、JavaScript内でDOMオブジェクトとして複数のオブジェクトが自動的に生成されます。

生成されたDOMオブジェクトメソッドプロパティ

実はDOMオブジェクトは既に何度も利用しています。

document.write()により文字列の書き出しをこれまで何度も行ってきましたが、これは自動的に生成されるdocumentオブジェクトのwriteメソッドを利用しています。

documentオブジェクトはDOMの中で最も頻繁に利用するオブジェクトで、Webページに関するあらゆる情報を持っています。

DOMはHTMLのhtml要素・body要素・p要素などの要素全てに対しオブジェクトとプロパティ、メソッドを定義します。

各要素のオブジェクトはツリー構造により親子関係となっており、「window」オブジェクトが最上位の親となります。

DOMは全ての要素をオブジェクトとして定義しますが1つ1つ独立しているわけではなく、windowオブジェクトの一部として各要素が定義されるイメージです。

このためDOMを利用し各HTML要素の操作を行う場合、windowオブジェクトの中から必要な要素を指定する必要があります。

windowオブジェクトとdocumentオブジェクト

windowオブジェクトはブラウザのウィンドウやフレームを表すオブジェクトで、DOMツリー構造の最上位に位置します。子オブジェクトには[location][history][document]などがあります。

このため、ドキュメントに文字列を書き出す「document.write()」を利用する場合、正しくは以下となります。

しかしwindowオブジェクトはJavaScript内で省略可能です。このため普段あまり意識することはありませんが、「全てのオブジェクトの親である」ことを覚えておきましょう。

なおwindowオブジェクトのメソッドには便利なものが多数あり、実は既に利用したことがあるメソッドもあります。

これまでalert()によりダイアログを表示していたと思いますが、これはwindowオブジェクトのalertメソッドを利用しており、windowを省略して利用していました。

DOMにはwindowオブジェクトを親とし多数のオブジェクトがありますが、windowオブジェクトの子オブジェクトの1つであるdocumentオブジェクトは最も頻繁に利用するオブジェクトとなります。

documentオブジェクトはHTML文書自体を表すオブジェクトで、HTMLの各要素はdocumentオブジェクトの子オブジェクトとなります。次よりdocumentオブジェクトを用いHTMLやCSSを操作する方法について学びます。

NEXTLESSONDOM操作DOM操作

PREVLESSONオブジェクトの基礎オブジェクトの基礎