DOM Level1 について

簡単な例

上のドキュメントを元に作者は、ヘッダの内容を変え、1つある段落を 2 つに書き換えたいものとしましょう。これは以下のスクリプトによってできます。(Javascript 予約語、DOM による事前定義プロパティおよびメソッド、JavaScript コメント とそれぞれ強調表示しています)

// document.getElementsByTagName("H1") はドキュメント中の
// H1 要素の NodeList を返します。リストの最初の番号は 0 です。
var header = document.getElementsByTagName("H1").item(0);

// ヘッダの firstChild は Text ノードであり、テキストノードの
// data プロパティにテキストが含まれまれています。
header.firstChild.data = "A dynamic document";
// ここでヘッダは "A dynamic document" となります。

// 同様にしてドキュメント中の最初の P 要素 を取得します。
var para = document.getElementsByTagName("P").item(0);
// そしてそのテキストも変更します。
para.firstChild.data = "This is the first paragraph.";

// 2 つ目の段落のために新しい Text ノードを生成します。
var newText = document.createTextNode("This is the second paragraph.");
// 2 つ目の段落となる新しい要素を生成します。
var newElement = document.createElement("P");
// テキストを段落に与えます。
newElement.appendChild(newText);
// そして、BODY (段落の親)に付加することでドキュメントの
// 末尾に段落を付け加えます。
para.parentNode.appendChild(newElement)

このスクリプトは 完成例 としてもご覧になれます。