  |
はてなキーワード: Document Object Modelとは
エディタなしでも大丈夫。アドレスバーでJavaScriptを実行してみよう！
アドレスバーに入れた場合、最後の値が表示されます。
javascript:"Hello world!"
サンプルでは良くあるけれど、実際、ダイアログはほとんど使いません。でもちょっとしたデバッグには便利です。
javascript:alert("Hello alert() world!")
このとき「alert()」とは「window.alert()」を表します。windowオブジェクトはブラウザの表示ウィンドウを表すオブジェクトです。windowオブジェクトのプロパティやメソッドを使用する場合は、alertに限らず「window.」が省略できます。
これが「print "Hello world!"」に一番近と思います。
javascript:document.write("Hello document.write() world!"); document.close()
documentオブジェクトは表示中のドキュメント全体を表すオブジェクトです。
Document Object Modelを利用して要素を追加します。
javascript:document.write("<html><body></body><html>"); document.close(); var p = document.createElement("p"); p.appendChild(document.createTextNode("Hello DOM world!")); document.body.appendChild(p);
現在のドキュメントがHTMLであれば、先ほどの「document.write()」はHTMLを扱うことになります。これを使用してbody要素を作っておき、そこへp要素を追加しています。
[追記] createTextNodeを使用するように変更しました。
javascript:document.write("<html><body>Hello world!</body><html>"); document.close(); p = document.createElement("p"); p.innerHTML = "Hello javascript world!"; document.body.appendChild(p); p.addEventListener("click", function(){this.style.borderStyle="solid"}, false)
イベントハンドラの使用方法は幾つかありますが、ここでは「addEventListener」を使用します(申し訳ありませんがIEでは動きません)。この例では、イベントに対するコールバック関数として無名関数の「function(){……}」が登録されます。p要素がクリックされたとき「function(){……}」が呼び出されます。このとき、this（変数ではありません！）が、要素pを示します。
