JavaScript/DOM
出典: フリー教科書『ウィキブックス（Wikibooks）』
DOM（ドム、Document Object Model、ドキュメント・オブジェクト・モデル）とは、プログラミング言語からHTMLドキュメントなどを扱うために標準化された仕様です。ウェブブラウザ上のJavaScriptにはDOM関連のプロパティやメソッドが組み込まれています。たとえばウェブブラウザ上に警告ダイアログを表示するwindow.alertメソッドもDOMの一部です。
概要[編集]
HTMLのscript要素を用いると、JavaScriptのプログラムをHTMLドキュメントの中に埋め込むことができます。
<!DOCTYPE html> <html> <head> <title>Example Web Page</title> </head> <body> <div id="stdout"></div> <script type="text/javascript"> var stdout = document.getElementById("stdout"); stdout.innerHTML = "Hello, world!"; </script> </body> </html>
このHTMLドキュメントをJavaScriptに対応したウェブブラウザで表示すると、ウェブページ上に "Hello, world!" という文字列が表示されます。script要素の中に書かれているJavaScriptプログラムのソースコードに注目してください。
document.getElementByIdメソッドはDOMの一部で、HTMLドキュメントから指定したIDを持つ要素を抽出します。ここでは "stdout" というIDを持つ要素、すなわち<div id="stdout"></div>というdiv要素を参照し、要素オブジェクトをstdoutという変数に代入しています。
stdout.innerHTMLメソッドを使用するとdiv要素の中身を取得したり、設定したりすることができます。ここではstdout.innerHTMLに "Hello, world!" という文字列を代入しているので、div要素の中身は "Hello, world!" という文字列になります。
