DOM（Document Object Model）の基本

 DOM（Document Object Model）とは

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

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

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>タグには子ノードである、２つのテキストノードと
１つの要素ノードが在ります。さらにこの要素ノードには１つの子ノードがあります。

要素ノード(親ノード)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ノードには１つしか子ノードはないので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内の要素を特定して
アクセスしましたがこの他に２ツのメソッドが用意されています。

document.getElementsByTagName("タグ名");

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

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