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!" という文字列になります。

このページ「JavaScript/DOM」は、書きかけです。加筆・訂正など、協力いただける皆様の編集を心からお待ちしております。また、ご意見などがありましたら、お気軽にノートへどうぞ。