Index
HOME > プログラムTOP > JavaScript
JavaScriptの基礎知識（7）：DOM篇
JavaScriptの言語仕様の基礎知識をまとめたページです。ここでは「DOM」について取り扱っています。DOM(Document Object Model)は、W3C(World Wide Web Consortium)という団体で規格・制定されています。これは、タグ形式のHTMLのようなXML文書(Extensible Markup Language)を、オブジェクトの階層構造によって表現し、それらのオブジェクトをプログラムから制御するための技術です。これにより、画像の読み込みや文字の表示・検索、スタイルの変更などを動的に変化させることができるようになります。DOMは、IE5以上、NN6以上、Safariで実装されています。DOMを使う場合は、必要に応じて、これ以前のブラウザへも配慮しましょう。
sasaraan programming
Exposition
●DOMの階層構造
DOMの基礎となっている各オブジェクトは、以下のように、階層構造となっています。すべてのオブジェクトはなんらかの親子関係となっていることが分ります。そして、すべてのHTML要素は、このDOMの階層によって、構造的に表現することができます。なお、この構造は、従来のHTMLの入れ子型のタグの階層とは異なりますので注意が必要です。
| -- | - window | ---- | - document | ---- | - anchor | - button | |
| | | - frame | - applet | - checkbox | ||||
| | | - history | - area | - fileUpload | ||||
| | | - location | - form | ---- | - hidden | |||
| | | - image | - password | |||||
| | | - layer | - radio | |||||
| | | - link | - reset | |||||
| | | - plugin | - select ----- option | |||||
| -- | - navigator | ---- | - mimeType | - submit | |||
| - plugin | - text | ||||||
| - textarea |
●オブジェクトの取得
DOMでオブジェクトを取得する方法には、"id"属性を利用する方法があります。
なお、styleプロパティはCSSの仕様に準じています。CSSのプロパティに"-"がない場合はそのまま、ある場合は"-"を取って次の文字を大文字にして使います。
値の設定には、"setAttribute"メソッドを利用することもできます。
さらに、対象となるオブジェクトをコレクション（配列）として扱うことも可能です。"getElemensByName"メソッドは、同じ名前(name属性)の要素をコレクションとして扱う時に使用します。
いずれの場合も、使用するときは添え字を付けて使用します。
<div id="test">
ＤＯＭのテストを実施中です。
</div>
<script type="text/javascript"><!--
document.getElementById("test").style.color="lime";
//--></script>
この様に、documentオブジェクトのgetElementByIdメソッドを使ってオブジェクトを取得することができます。ここでは、スタイルシートを通じて文字色を変更しています。この時、引数idは変数でも可能です。
...
<script type="text/javascript"><!--
function ChangeColor(strID) {
document.getElementById(strID).style.color="blue";
}
//--></script>
...
<input type="button" value="テスト" onclick="ChangeColor('test')">
...
上の例では、関数の引数にid文字列を取るようになっています。次に、設置したボタンのイベントハンドラにこの関数を指定し、id文字列を引数として渡しています。ボタンを押すと文字色が変わる仕組みです。なお、styleプロパティはCSSの仕様に準じています。CSSのプロパティに"-"がない場合はそのまま、ある場合は"-"を取って次の文字を大文字にして使います。
| CSSのプロパティ | DOMにおける記述 | |
| width | → | width |
| background-color | → | backgroundColor |
| font-size | → | fontSize |
setAttribute("属性名", "属性値")
document.getElementById("title").setAttribute("value","雪国");
"id"属性を使用する代わりに、"getElementsByTagName"メソッドを使って、タグ名からオブジェクトを取得することもできます。この時、個々のオブジェクトには、添え字を使ってアクセスします。
<div>これはサンプルです。</div>
<div>ＤＯＭのテスト中です。</div>
document.getElementsByTagName("div")[0].style.color ="blue";
document.getElementsByTagName("div")[1].style.color ="red";
<input type="text" name="title" value="" >
<input type="text" name="title" value="" >
document.getElementsByName("title")[0].value="Ａ";
document.getElementsByName("title")[1].value="Ｂ";
●オブジェクトの作成と破棄
DOMでは、"createElement"メソッドを使ってオブジェクトを動的につくることができます。
var oTable = document.createElement("table");
ここではtableタグを作成しています。ただし、これだけでは追加されません。このオブジェクトを加える親オブジェクトを特定する必要があります。親オブジェクトに追加するには "appendChild"メソッドを利用します。
var oParent = document.getElementsByTagName("div")[0];
oParent.appendChild(oTable);
作成とは逆に、"removeChild"メソッドにより、オブジェクトを動的に削除することもできます。
oParent.removeChild(oTable);文字列を追加する時は、特に、"createTextNode"というメソッドを利用します。また、"nodeValue"プロパティを利用して、値を途中で変更することもできます。
var sNode = document.
createTextNode("Hello World !");
oParent.appendChild(sNode);
...
sNode.nodeValue = "Goodbye World !";
これらのメソッドを使うと、Webページ全体を更新させることなく、プログラムからページの一部のみを変化させることが可能となります。
www.sasaraan.net
(c) morijoh