JavaScript での DOM による (X)HTML 操作

page:2/X
author:nobuoka
date:2009.07.04

目次

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

HTML 文書内の id が "test" である要素を取得し、その要素の子孫の全ての "p" 要素を取得し、その個数を alert メソッドで表示するサンプルです。 どのようなコードを書いているのかはソースコードをご覧ください。

備考

参考文献

Google Adsense!!