JavaScript での DOM による (X)HTML 操作
目次
- #1 はじめに
- #2 要素の取得
- #3 ノード木の探索
- #4 ノードの生成・追加
HTML 要素 (element 型オブジェクト) を取得する
JavaScript は DOM を実装しており、(X)HTML 文書中の各種 Node (ノード) はオブジェクトとして扱われます。 例えば "html" や "body" などの要素 (Element) は element 型オブジェクトとして扱うことが出来ます。 文書中の文字列は text 型オブジェクトです。
ここでは、JavaScirpt を使って (X)HTML の各種要素 (element 型オブジェクト) を取得する方法を説明します。
ルート要素 (root element) の取得
XML 文書は、木構造で最上位にくる要素をただ 1 つ持っています。 この要素をルート要素といい、(X)HTML 文書では "html" 要素がこれにあたります。
DOM では、 Document インターフェイス の 読み取り専用属性 documentElement にルート要素が入っています。 JavaScript では、document オブジェクトが Document インターフェイスを実装しているので、
var root = document.documentElement;
という風に document オブジェクトの rootElement プロパティを参照することで、ルート要素を取得できます。 上の例では、変数 root にルート要素 "html" を表す element 型オブジェクトが代入されます。
指定の id 属性を持つ要素の取得: getElementById メソッド
次に、指定の id 属性を持つ要素の取得方法を説明します。
DOM の Document インターフェイス にある getElementById メソッド を使うと、指定の id 属性を持つ要素 (element 型オブジェクト) を取得できます。
var elem = document.getElementById( id );
引数 id には、取得したい要素の id 属性の値を、文字列 (String 型) で指定します。 戻り値として、HTML 文書中の要素のうち、id 属性の値が id である element 型オブジェクトが返ってきます。
指定の要素名を持つ要素群の取得: getElementsByTagName メソッド
特定の要素名を持つ要素群を取得するためには、document オブジェクトと element 型オブジェクトの getElementsByTagName メソッド を使用します。 このメソッドは、そのオブジェクトの子孫の指定したタグ名のすべての要素を配列 (正確には nodeList 型オブジェクト) として返します。
var elems = obj.getElementsByTagName( name );
obj は、document 型オブジェクトか element 型オブジェクトです。
引数 name には、取得したい要素のタグ名 (QName?) を文字列 (String 型) で指定します。
特殊な値として "*" が使用でき、これを引数として渡すと、全てのタグ名が一致します。
戻り値として elems には、obj の子孫要素のうちタグ名が name である全ての要素 (element 型オブジェクト) を格納した noodeList 型オブジェクトが代入されます。 nodeList 型オブジェクトは配列と同じように使用できるので、nodeList 型オブジェクトに入っている要素は以下のように取り出せます。
// nodeList 型オブジェクト elems から 1 つずつ要素 (element 型オブジェクト) を取り出す
for( var i = 0; i < elems.length; i++ ) {
// nodeList 型オブジェクトは配列のように扱うことができる
var elem = elems[i];
// 下のように item メソッド を使用しても良い
// elem = elems.item(i);
// 以下で elem に対して何らかの処理を行う
// ...
}
なお、nodeList 型オブジェクトに格納される順番は、(X)HTML 文書に出現する順番に一致します。
また、XHTML の場合は名前空間が関係してくるので getElementsByTagNameNS というメソッド を使用することが推奨されます。 が、MIME タイプが "text/html" の場合は現在のところブラウザは HTML と同様に扱うため getElementsByTagName を使用するのが良いです。 MIME タイプが "application/xhtml+xml" の XHTML の場合は、getElementsByTagNameNS を使用しましょう。
// MIME タイプ "application/xhtml+xml" や "text/xml" の場合は名前空間を考慮すべき
// 要素 obj の子孫でタグ名が name の要素群を取得する (XHTML 1.0 / 1.1 の場合)
var elems = obj.getElementsByTagNameNS( "http://www.w3.org/1999/xhtml", name );
Sample
- MIME タイプ "text/html" の HTML 4.01 の場合のサンプル
- MIME タイプ "text/html" の XHTML 1.0 の場合のサンプル
- MIME タイプ "application/xhtml+xml" の XHTML 1.0 の場合のサンプル
HTML 文書内の id が "test" である要素を取得し、その要素の子孫の全ての "p" 要素を取得し、その個数を alert メソッドで表示するサンプルです。 どのようなコードを書いているのかはソースコードをご覧ください。
備考
- document オブジェクトは Document インターフェイス を実装している
- element 型オブジェクトは Element インターフェイス を実装している
参考文献
- W3C 勧告: Document インターフェイス (Document Object Model Core) ... JavaScript に限らない DOM の勧告
- W3C 勧告: Element インターフェイス (Document Object Model Core) ... JavaScript に限らない DOM の勧告
- DOM document リファレンス (Gecko DOM Reference) ... JavaScript に限定した DOM 実装の参考文献
- DOM element リファレンス (Gecko DOM Reference) ... JavaScript に限定した DOM 実装の参考文献