#11 Document Object Model

HTML文書をプログラミング言語でアクセスするためのモデルが Document Object Modelである。

文書ツリーとDOM

<body>
<p>今回は<em>三権分立</em>がテーマです。</p>
<ul>
 <li>司法</li>
 <li>立法</li>
 <li>行政</li>
</ul>
<p>の3つが…</p>
</body>

               +--「今回は」
               |
        +-[p]--+-[em]--「三権分立」
        |      |
        |      +--「がテーマです。」
[body]--+
        |      +-[li]--「司法」
        |      |
        +-[ul]-+-[li]--「立法」
        |      |
        |      +-[li]--「行政」
        |
        |
        +-[p]--「の3つが…」

図: 要素の木

これと全く同じ木構造が、HTMLユーザエージェントに付随するスクリプト言語のオブジェクト(複合的な値)として生成される。これを規定したものが DOM (Document Object Model)である。

JavaScriptでのDOM

JavaScriptでは、javascriptプログラムを読み込んだときのHTML文書のあらゆる要素が、JavaScript言語の HTMLElement(の派生) オブジェクトとして生成されている。「図:要素の木」が示す構造の場合、最初のbody要素を意味するオブジェクトにアクセスできれば、その子孫の全ての要素オブジェクトにアクセスできる。また、HTML要素に付けられた属性や、スタイルシートの特性値も自在に取得/設定できる。

documentオブジェクト

documentオブジェクトは、HTML文書全体の情報を保持する。スタイルシートの操作で必要になるのは、 HTML文書中の特定の要素を探し出す方法で、そのための関数には以下のものがある。

上記のいずれかの関数によって、ひとつの要素オブジェクトが見付かるとその他の要素も見付けることができる。「図:要素の木」が示すように、あらゆる要素は親、兄弟、子を持つ可能性がある。このような性質を持つものを一般的にノードという。特定の要素をノードとみなし、木の親兄弟を辿るいくつかの値が定義されている。

HTML要素の属性へのアクセス

特定の要素を持つオブジェクトから、その要素に設定された属性には、

を介してアクセスできる。例えば、以下のようなHTML要素記述があったとする。

<p>鳥海山:<img src="chokai.jpg" alt="Mt.Chokai" 
width="400" height="266"></p>

このうち、img要素に設定された width, height 属性を半分にするスクリプトを作成してみる。JavaScriptプログラムからこのimg要素を探しやすいように、id属性を追加し、画像クリックによって関数が起動するように onclick 属性を追加し、以下のように書き換えておく。

<p>鳥海山:<img src="chokai.jpg" alt="Mt.Chokai" 
id="photo01" onclick="hanbun();" width="400" height="266"></p>

getAttribute/setAttributeを利用

JavaScriptプログラムファイル

chokai1.js

を開き、hanbun()関数を以下のように作成する。

function hanbun() {
  chokai = document.getElementById("photo01");
  w = chokai.getAttribute("width");
  h = chokai.getAttribute("height");
  chokai.setAttribute("width", w/2);
  chokai.setAttribute("height", h/2);
}

このスクリプトをロードするようHTML文書に以下のscript要素を追加する。

<p>鳥海山:<img src="chokai.jpg" alt="Mt.Chokai" 
id="photo01" onclick="hanbun();" width="400" height="266"></p>
<script type="text/javascript" src="chokai1.js">
</script>

属性名と同じ変数を利用

JavaScriptプログラムファイル

chokai2.js

を開き、hanbun()関数を以下のように作成する。

function hanbun() {
  chokai = document.getElementById("photo01");
  w = chokai.width;
  h = chokai.height;
  chokai.width = w/2;
  chokai.height = h/2;
}

属性値はHTML文書で明示的に定義されていない場合、取得できない場合がある。スクリプトで操作したい場合はHTML文書中であらかじめ値を与えておくよう注意する。

CSSのプロパティへのアクセス

要素オブジェクトに属するstyleオブジェクトを介してスタイルシートのプロパティがアクセスできる。特性名にハイフンが含まれるものはハイフンを取って、次の文字を大文字にして結合する。たとえば、

<div id="foo" style="background-color: yellow">
...
</div>

というdiv要素の場合は、以下のJavaScriptで background-color 特性値が取得できる。

x = getElementById("foo");
x.style.backgroundColor;

この変数に代入することで、特性値を変更することもできる。

以下の例は、マウスが入ると赤に、出ると黄色に戻る枠を作成するものである。

redyellow.html

<html>
<head><title>Red and Yellow</title>
<style type="text/css">
<!--
div#box {
  width: 200px; height: 100px; background-color: yellow;
}
-->
</style>
</head>

<body>
<p>マウスを入れると赤、出すと黄色。</p>
<div id="box" onmouseover="red();" onmouseout="yellow();">
</div>
<script type="text/javascript" src="redyellow.js">
</script>
</body>
</html>

redyellow.js

function red() {
  document.getElementById("box").style.backgroundColor = "red";
}
function yellow() {
  document.getElementById("box").style.backgroundColor = "yellow";
}

CSSの特性値の場合も属性のときと同様、HTML+CSS文書であらかじめ値を設定していない特性値はスクリプトからは取得できない(nullが返る)。

文書とスタイルの分離という観点からは、CSSの特性値を操作するこの方法が最も望ましい。

Document Object Model

文書ツリーとDOM

JavaScriptでのDOM

documentオブジェクト

HTML要素の属性へのアクセス

`getAttribute/setAttribute`を利用

属性名と同じ変数を利用

CSSのプロパティへのアクセス

参考文献

Document Object Model

文書ツリーとDOM

JavaScriptでのDOM

documentオブジェクト

HTML要素の属性へのアクセス

getAttribute/setAttributeを利用

属性名と同じ変数を利用

CSSのプロパティへのアクセス

参考文献

`getAttribute/setAttribute`を利用