Using the W3C DOM

document オブジェクトはブラウザによっては要素の配列や各種の要素にアクセスするためのプロパティを持っています。たとえば Internet Explorer では、ドキュメント内の特定の要素にアクセスするのに document.all[] が使われます。このような配列の多くは W3C の Document Object Model 仕様に含まれておらず、Firefox、SeaMonkey、Netscape 7 のような標準に準拠したブラウザでは JavaScript エラーの要因になります。

W3C W3C Document Object Model は、HTML ページのほとんどすべての要素をスクリプト処理可能なオブジェクトとして解放します。一般的に、W3C DOM の属性とメソッドは、DHTML プログラミングで使われていた独自のオブジェクトモデルより強力です。W3C DOM の属性とメソッドは、MSIE 7、Opera 9、Safari 2、Konqueror 3.x、Mozilla ベースのブラウザ (Firefox、Seamonkey、Netscape 7+、Camino) などのモダンブラウザでおおむね完全にサポートされています。このため、ブラウザ独自のオブジェクトモデルに依存することで得られるメリットは何もありません。

サポートされていない DOM 関連のプロパティ

以下の document オブジェクトプロパティは W3C Document Object Model ではサポートされません。

• document.layers[]
• id_attribute_value
• document.all
• document.all.id_attribute_value
• document.all[id_attribute_value]

以下の要素プロパティ (Internet Explorer が起源) も同様に W3C Document Object Model ではサポートされません。

• FormName.InputName.value
• InputName.value
• FormCtrlName
• document.forms(0)

このようなプロパティを使うスクリプトは、Firefox、Mozilla、Netscape 7 や他の標準準拠のブラウザでは実行されません。

代わりに、次の節で説明している W3C DOM のアクセス属性・メソッドを使ってください。これらは Internet Explorer でもサポートされていますので、IE 独自の属性やメソッドを使う必要はありません。

W3C DOM で要素にアクセスする

HTML ページの要素にスクリプトでアクセスする最良の手段は document.getElementById(id) を呼び出すことです。ほとんどのブラウザ (MSIE 5+、Firefox、NS 7+、Seamonkey、Opera 6+、Safari 1.x、Konqueror 3.x など) は document.getElementById(id) をサポートしています。

このメソッドは独特の識別名をつけた要素への参照を返し、その要素に対するスクリプトの使用を可能にします。たとえば次の短いサンプルは、「inset」という id のついた div 要素の左マージンを動的に 0.5 インチに設定します:

// HTML の中身: <div id="inset">サンプルテキスト</div>
document.getElementById("inset").style.marginLeft = ".5in";

フォームとフォーム要素にアクセスする方法の詳細はこちらのリンクを参照してください。
Referencing Forms and Form Controls by comp.lang.javascript newsgroup FAQ notes
DOM 2 specification on accessing forms and form elements
Referencing Forms and Form elements correctly, Javascript Best Practices, by Matt Kruse

要素群にアクセスするために、DOM 仕様には getElementsByTagName もあり、与えられたタグ名のすべての要素のリストをドキュメントに現れる順で返します。

var arrCollection_Of_Pargs = document.getElementsByTagName("p");
var objFirst_Parg = arrCollection_Of_Pargs[0];
// objFirst_Parg will reference the first paragraph in the document
objFirst_Parg.style.border = "2px solid green";
// and now, the first paragraph in the document 
// gets a 2px solid green border.

これらのアクセスメソッドに加え、W3C DOM2 仕様は、新しい要素を作成してドキュメントに挿入するメソッド、属性や新たな内容を作成するメソッド、コンテンツツリーを縦断するメソッド、ユーザーがドキュメント自体に働きかけたときに起きるイベントの処理などのためのメソッドを提供します。

ドキュメントのスタイルと内容の操作

DOM を利用して要素のスタイルを変更する

以下の表は Web ページのさまざまな HTML 要素に定義されたスタイルルールにアクセスしたり変更したりするための標準に準拠したメソッドを説明しています。W3C の DOM2 勧告の CSS2 拡張インターフェイス を参照してください。

DOM レベル 2 では、要素の CSS プロパティに新しい値を設定するために、ElemRef.style オブジェクトの参照を使用します。スタイルに対応する要素は DOM の getElementById や上の DOM アクセス の節で説明したメソッドによって取得できます。

要素の CSS プロパティへの W3C DOM2 の反映

W3C 勧告によれば、要素のスタイルプロパティから返される値は当該要素の STYLE 属性の静的な設定のみを反映するだけであり、親から継承されるスタイル設定を含めた全体としての「算出結果スタイル」ではないことに注意してください。それゆえ、DOM2 を介して JavaScript からこれらのプロパティを読み書きしたければ、次の2つの方法のいずれかを採ってください。

• 要素の静的な CSS の宣言は (あれば) すべて要素の STYLE 属性の中に置く。
• 要素に対しては静的な CSS 宣言を一切使わず、JavaScript から DOM を利用してその CSS プロパティを初期化する。

要素の CSS ポジショニングプロパティへの W3C DOM2 の反映

W3C DOM2 の style.left や style.top プロパティが返す値は CSS の単位 ("px" など) を含みます。ところが、Nav4 の element.left や IE4/5 の element.style.pixelLeft (及び top に対応するプロパティ) は整数値を返します。したがって 要素の左や上のインライン STYLE セッティングを整数値で取得したい場合は、parseInt() を使って 文字列から整数を解析してください。逆に、要素の左や上のインライン STYLE セッティングを設定したければ整数値に単位を表す文字列を付け加えること ("140px" のように) を忘れないでください。したがって 要素の左や上のインライン STYLE セッティングを整数値で取得したい場合は、parseInt() を使って 文字列から整数を解析してください。逆に、要素の左や上のインライン STYLE セッティングを設定したければ整数値に単位を表す文字列を付け加えること ("140px" のように) を忘れないでください。

CSS 1 and CSS 2.x specifications require that non-zero values must be specified with a length unit; otherwise, the css declaration will be ignored. Mozilla-based browsers, MSIE 6+, Opera 7+ and other W3C standards-compliant browsers enforce such handling of parsing error.
CSS 1 Forward-compatible parsing
CSS 2.1 Rules for handling parsing errors

DOM を利用して要素のテキストを変更する

現在の要素のテキストコンテントの変更方法は普通の操作手段と比して大きく変更されました。各要素のコンテントは一連の子ノードに分割されています。各ノードはプレインテキスト及び子要素で構成されます。要素のテキストを変更するためにスクリプトはノードを操作します。

ノードの構造及びサポートされるメソッドは W3C DOM レベル 1 勧告で定められています。

要素が子要素を持たずにテキストのみであるならば、(通常) ElemRef.childNodes[0] としてアクセスされる 1 つの子ノードを持ちます。ElemRef.innerText の大雑把な代替として ElemRef.childNodes[0].nodeValue が使えます。 We could introduce DOM 3 Core textContent attribute here which is supported by Mozilla 1.5+, Safari 2.x, Opera 9.x and is a perfect equivalent to MSIE's innerText. https://www.w3.org/TR/2004/REC-DOM-Le...e3-textContent

次の例では、既に HTML ファイル中にある SPAN 要素のテキストをどう変更するか示します。

<body>
  <p>Papa's got <span id="dynatext">a lot of nerve</span>!</p>

  <script type="text/javascript">
// SPAN 要素の参照を取得
var SpanElemRef = document.getElementById("dynatext");

// SpanElemRef.innerText = "a brand new bag" を実現
var new_txt = document.createTextNode("a brand new bag");
SpanElemRef.replaceChild(new_txt, SpanElemRef.childNodes[0]);

// 他に、いささか危険な実現方法も
// (childNodes[0] がテキストノードでなければ機能しない)
SpanElemRef.childNodes[0].nodeValue = "a brand new bag";

// SpanElemRef.innerHTML = "a brand <b>new</b> bag" を実現
var new_el = document.createElement(SpanElemRef.nodeName);
new_el.appendChild(document.createTextNode("a brand "));
var bold_el = document.createElement("b");
bold_el.appendChild(document.createTextNode("new"));
new_el.appendChild(bold_el);
new_el.appendChild(document.createTextNode(" bag"));
span_el.parentNode.replaceChild(new_el, SpanElemRef);
  </script>
</body>

最初の例は SPAN 中のテキスト置き換えの比較的単純な方法であり、元のテキストノードを新しいもので置き換えています。ここでの想定として、SPAN は単一のテキストを子に持つものとしています。そうでない場合もコードは機能しますが、結果は予期せざるものになるかも知れません。

2 番目の例は同じ事を行う、より簡潔ではあるが乱暴で強引な手法です。注釈を入れたように、第一の子ノードがテキストノードでない場合、これは機能しません。子要素は nodeValue を持ちますが、そのフィールドの中身はドキュメント中に表示されることはないのです。

最後の例は innerHTML の設定に相当する手法です。まず、新しい要素を作ります。その要素は元のものと同じ型 (SPAN) になります。次に 3 つのノードを追加します。初めのテキストノード、自身のテキストノードを持つ B 要素、最後のテキストノード、の 3 つです。そしてスクリプトは SPAN 要素の親 (P 要素) にアクセスし、親の子ノードリスト中にある元の SPAN を新しい要素で置き換えます。

ドキュメントの内容を変更するスクリプトの書き換えがくだらない作業ではないのは自明でしょう。このような変換によって得られるものは、スクリプトが Firefox 2、Seamonkey 1、Netscape 7+ や他の Gecko ベースのプログラムのような現代的な W3C DOM 互換のブラウザで動作するということです。しかしながら後方互換性の要求はマルチプラットフォームでの扱いの難しさを増すばかりか悪化させます。

Useful references on changing an element's text using the DOM

• Whitespace in the DOM by David Baron
• Alternatives to innerHTML for more advanced users
• innerHTML VS DOM by Tim Scarfe; an excellent article, for more advanced users
• Speed and performance comparison between innerHTML attribute and DOM's nodeValue when modifying the text data of a text node by Gérard Talbot
• Interactive DOM level 2 CharacterData Interface attributes and methods tests: other ways to modify (replace, delete, manipulate) efficiently text nodes in the DOM by Gérard Talbot