ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

● STEP 1-6

DOM（Document Object Model）の概念を知ろう

DOMとは何か。その役割について

　ストップウォッチの作成を通してごく基本的な概念や考え方を確認してみました。この中で「ブラウザでの表示内容をJavaScriptによって変えられる」ということは理解できたのではないでしょうか。改めて記すと次のようなところが表示内容の変化でした。

　　●秒数を示すディスプレイの値

　　●スタートやストップを押した際に追加されたログのメッセージ

　このようなブラウザの表示内容を操作する方法は標準化されており、DOM（Document Object Model）という仕様に則って提供されています。ストップウォッチを作成する際にdocument.createElement やelement.appendChildというメソッドを利用したと思いますが、このメソッドもDOMの仕様に従って提供されています（本来はDOMはHTMLの操作だけを目的に提供される仕様ではありませんが、本書ではWebブラウザ上でのHTML操作を学習内容としているのでHTMLの文脈で記します）。

　上の図を参考にしながら理解を深めましょう。WebページをHTMLから読み込んだ際、ブラウザは読み込んだ情報からDOM構造を構築して保持しています。このDOMの内容が最初にブラウザ画面に表示される描画内容です。 ...