2009年09月28日

DOM(Document Object Model)の基本

スポンサード リンク

 DOM(Document Object Model)とは

JavaScriptのようなプログラミング言語から,
HTML/XML文書にアクセスして それを操作する方法を提供しています。

DOMでは、HTML/XML文書のすべての要素はノードと呼ばれるオブジェクトから構成されています。
このノードはいくつかありますが
要素ノード (element node)、テキストノード (text node)、属性ノード (attribute node)の
3ツのノードが基本です。

DOMとjavaScriptの関連についてはThe DOM and JavaScript を参考にしてください。

ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!


 ドキュメントツリー(DOMツリー)

<p align="left">これがDOMツリーの構造です。</p>

上記のhtml では
<p>タグが要素ノード、(簡単に言えばHTMLのタグのことです)
<p>タグに囲まれた文字列  "これがDOMツリーの構造です。" がテキストノードです。
align="left"属性ノードになります。
DOMツリーでは文字列そのものが一ツのノードになります。

これをDOMツリーで表すと下図のようになります。

要素ノード(親ノード)parentNode
 <p>
 ├── テキストノード(子ノード)childNodes[0]
 │    "これがDOMツリーの構造です。"
 │
 └── <p>の属性ノード
        align="left"

  要素ノード <p>テキストノード "これがDOMツリーの構造です。"の親ノードです。
逆にみると、このテキストノード要素ノード <p>子ノードchildNodes[0]になります。
属性ノード子ノードになりますが、子ノードとして扱われません。

注*  ここでは親ノード<p>としていますが実は親としてbody タグがありますし、他の要素があることもあります。
   この例ではツリーは非常に簡単ですが実際のHTML文書はたくさんのノードから構成されています。
  一番目に現れた子ノードはchildNodes[0]、二番目はchildNodes[1]・・・・[2]、[3]となります。


<p>タグに id属性を付け、ひとつタグを入れ子にしてみました。

<p align="left" id="smp">これが<strong>DOMツリー</strong>の構造です。</p>

これがDOMツリーの構造です。

親ノード<p>タグには子ノードである、2つのテキストノード
1つの要素ノードが在ります。さらにこの要素ノードには1つの子ノードがあります。

要素ノード(親ノード)parentNode
<p>
 ├── テキストノード(子ノード)childNodes[0] 
 │    "これが"
 │ 
 ├── 要素ノード(子ノード)childNodes[1]
 │   <strong>
 │        │     
 │        └── テキストノード(子ノード)childNodes[1].childNodes[0]
 │                 "DOMツリー"
 │
 ├── テキストノード(子ノード)childNodes[2]
 │    "の構造です。"
 │
 └── <p>の属性ノード
      align="left"
      id="smp"
プロパティ     返り値
nodeValue :テキスト抽出 // 要素ノードはnull 、テキストノードはノードの文字列
nodeName :ノードのタグ名 // 要素はタグ名、テキストノードは "#text"という文字
childNones.length :子ノードの数
nodeType :各種ノードが返す数値 // 要素ノードは1,テキストノードは3
getAttributeNode :ノードの指定した属性名の属性値を得る
 注) getAttributeNodeはメソッドです
各 プロパティをクリックするとそれに対応する 値 が表示されます。

 document.getElementById('id属性値');

ではdocument.getElementById メソッドを使って各、子ノードにアクセスしてみます。
ここでは指定した'id属性値を持つ要素ノード <p>が起点になります。

<p align="left" id="smp">これが<strong>DOMツリー</strong>の構造です。</p>
var Mnode = document.getElementById("smp");
// <p>タグ内の全要素を変数 Mnode に格納します。
Mnode.*****; Mnode.childNodes[0].*****; Mnode.childNodes[1].*****; Mnode.childNodes[1].childNodes[0].*****; Mnode.childNodes[2].*****;
***** に上記,表のプロパティ(getAttributeNodeを除く)をいれますと
それに対応する値が返ってきます。

  要素の属性の値を得るにはgetAttributeNode()メソッドを使います。
引数に属性名を入れるとその属性値を返します。
Mnode.getAttributeNode('align').valueでその属性値 left
Mnode.getAttributeNode('id').valueでid属性値 smp を取得することができます。


リストマーク a 要素の属性値やノードの値の取得と変更

JavaScript スタイルシートサンプル集
<a href="http://javascript123.seesaa.net/" target="_blank" class="Clink" id="link1">JavaScript スタイルシートサンプル集</a>

値の取得
var Mnode = document.getElementById("link1");
Mnode.getAttributeNode('href').value; // http://javascript123.seesaa.net/
Mnode.getAttributeNode('target').value; // _blank
Mnode.getAttributeNode('class').value; // Clink
Mnode.getAttributeNode('id').value; // link1
Mnode.childNodes[0].nodeValue; // JavaScript スタイルシートサンプル集
 <*Mnodeノードには1つしか子ノードはないのでfirstChild(最初の子ノード)でも
lastChild(最後の子ノード)でも同じ値を取得できます。*>
Mnode.firstChild.nodeValue; // JavaScript スタイルシートサンプル集
Mnode.lastChild.nodeValue; // JavaScript スタイルシートサンプル集
リンク先とリンク文字をgetAttributeNodeとnodeValueで変更します。
値の変更
var Mnode = document.getElementById("link1");
Mnode.getAttributeNode("href").value="http://www.google.co.jp/";
Mnode.childNodes[0].nodeValue="Google"; 
<*値の取得とは反対に希望する値を代入すればできあがりです。*>

上記の用例は簡単ですがこのようにしてJavascriptからDOMツリーを辿って
HTML文書を自由に操作できます。

今回はdocument.getElementById("id値");を使ってHTML内の要素を特定して
アクセスしましたがこの他に2ツのメソッドが用意されています。

document.getElementsByTagName("タグ名");

document.getElementsByName("name属性値");

チェックが入るとチェックボックスとラベル(文字)の背景色が変わります
チェックボックスのチェックできる数を制限し,入力不可にします
チェックボックスのすべて選択 すべて解除
ツリーメニュー チェックボックスにチェックを入れるとメニューが展開
チェックが入るとチェックボックスとラベル(文字)の背景色が変わります
JavaScriptで動的にクラス名を付けます。変えます
テーブルの行の背景色を一行おきに変えます
トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐

posted by javaScript at 22:09 | 大阪 ☔ | DOM | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。