DOM

DOM(ドキュメントオブジェクトモデル)とは、XMLやHTMLなどのツリー構造を操作するための機能。
Webブラウザ上で動作するJavaScriptはDOMを使用することでWebブラウザ上のすべての要素にアクセスしたり変更を加えることができる。
JavaScriptからWebページのコンテンツにアクセスするにはDocumentオブジェクトを使用するが、DocumentオブジェクトからはDOM APIを利用する。
DOMにはいくつかのレベルがあるが、DOMLevel0ではドキュメント内の一部の要素しかアクセスできない。
DOMLevel1と2はW3Cで標準化され、すべての要素にアクセス可能。

Documentオブジェクト

DocumentオブジェクトはWindowオブジェクトのdocumentプロパティとして定義されている。

ドキュメントへの書き込み

write()メソッドをを用いる。

ノードを取得する

//要素名を指定し配列として取得
var h1=document.getElementByTagName('h1')[0];
//id属性の値を指定して要素を取得
var p=document.getElementById('paragraph1');
//name属性の値を指定し配列として取得
vae empIdField=document.getElemensByName('empId')[0];

新たなノードを追加する

createElement()メソッドを使用する

ノードを置換する

replaceChild()メソッドを使用する

ノードを削除する

removeChild()メソッドを使用する

CSS

JavaScriptからDOMのElementオブジェクトを操作することでCSSを動的に変更出来る。
JavaScriptからの動的なCSSの操作はダイナミックなコンテンツを作成する際に効果的なテクニック。