前回は、開発、実行、デバッグ手法などクライアントサイドJavaScriptとHTMLについてまとめた。ここでは、HTMLをJavaScriptから操作するときに用いる形式であるDOMについて解説する。
１ DOMとは
DOM（Document Object Model）とは、HTMLドキュメントやXMLドキュメントをプログラムから利用するためのAPIである。DOMではHTMLドキュメントやXMLドキュメントをオブジェクトのツリー状の集合（DOMツリー）として取り扱う。DOMツリーの中の一つひとつのオブジェクトはノードと呼ばれる。
DOM Level 1
DOM Level 1にはCoreとHTMLの2つのモジュールから構成される。CoreはHTMLに限らない一般的なDOM操作についての仕様で、HTMLはHTML文書に特有のメソッドについての仕様である。
DOM Level 2
DOM Level 2はDOM Level 1よりもずっと多くのモジュールを含む。以下の6つである。
- Core
- HTML
- Views：文書の表示状態（表現）についての仕様
- Events：キャプチャリング、バブリング、キャンセルなどのイベントシステムの仕様
- Style：スタイルシートについての仕様
- Traversal and Range：DOMツリーをたどる方法や範囲指定についての仕様
DOM Level 3
DOM Level 3は以下の5つのモジュールで構成されている。
- Core
- Load and Save：文書構造の読み込みと書き出しについての仕様
- Validation：文書構造が正当であることを検証するための仕様
- XPath：XPathについての仕様
- Events
DOMの記述
DOMの記述は「インターフェース名.メソッド名()」「インターフェース名.プロパティ名」と表記する。
２ DOMの基礎
タグ、要素、ノード
- タグ：文書構造を指定するためのマークアップとして記述される文字列。開始タグと終了タグがあるのが普通
- 要素、ノード：要素とノードはちょうど継承関係にあり、ノードがスーパータイプである。
DOM操作
DOM操作は選択、作成、変更、削除に分けて説明する。
Documentオブジェクト
DocumentオブジェクトはDOMツリー構造のルートノードである。DocumentオブジェクトはJavaScript内においてdocumentというグローバル変数でアクセスできる。
３ ノードの選択
IDによる検索
JavaScriptでHTMLドキュメントの特定のノードを選択する際に最も多く使われる方法がDocument.getElementById()メソッドである。
タグ名による検索
Element.getElementsByTagName()メソッドを使用すると指定したタグ名のノードがすべて取得できる。タグ名にはワイルドカードとしての’*’も指定できる。’*’を指定した場合はすべての要素を取得できる。
- ライブオブジェクトの特徴：Element.getElementsByTagName()で取得できるオブジェクトはNodeListオブジェクトであること
- ライブオブジェクトを操作する上での注意点：forループを実行するとき
- ライブオブジェクトのパフォーマンス：一度Arrayに変換してから使う場合の方が優れている。Array.prototype.slice()メソッドをNodeListオブジェクトに対して適用する
名前による検索
HTMLDocument.getElementsByName()メソッドによりname属性の値で要素を絞り込んで取得できる。使用頻度は低い。
クラス名による検索
HTMLElement.getElementsByClassName()メソッドを使用すると指定したクラス名の要素を取得できる。クラス名は複数の値を指定できる。
親、子、兄弟
関連するノードを参照するためのプロパティは以下の通り。
- parentNode：親ノード
- childNodes：子ノードリスト
- firstChild：最初の子ノード
- lastChild：最後の子ノード
- nextSibling：次のノード
- previousSibling：1つ前のノード
XPath
XPathを使うと、mainというidが指定されたdiv要素の中にあるcontentというclassが指定された3番目のp要素の中にある、hrefがhttp://example.com/ではじまるa要素といった複雑な指定が簡単に行える。
Selectors API
Selectors APIではCSSで要素を指定するときと同様の指定方法で要素が取得できる。
４ ノードの作成・追加
ノードを作成するにはDocument.createElement()メソッドやDocument.createTextNode()メソッドを使う。また、あまり使わないがDocument.createComment()メソッドでコメントを作成できる。あるノードの最後の子要素として追加する場合はNode.appendChild()メソッドを使う。さらに、ある要素の位置にノードを挿入する場合はNode.insertBefore()メソッドを使う。
５ ノードの内容変更
取得したノードのプロパティを書き換えることによって、その変更はHTMLドキュメントにも反映される。あるいはNode.replaceChild()メソッドを利用してノードを置換できる。
６ ノードの削除
ノードを削除する場合はNode.removeChild()メソッドを利用する。
７ innerHTML／textContent
innerHTML
HTMLElementのinnerHTMLプロパティに値を設定するとブラウザはその内容をパースし、解析結果をその要素の子要素とする。
textContent
innerHTMLプロパティはHTML文字列として参照できるが、textContentプロパティは子要素まで含めてテキスト部分だけを取得・設定できる。
８ DOM操作のパフォーマンス
内容を書き換えたり、見た目を変更する場合、ブラウザは画面を再描画する。再描画はそれなりのコストのかかる処理なので、不要な再描画は避けるべきである。その際、DocumentFragmentを利用すると再描画の回数を1回にすることができる。
最後に
DOM（Document Object Model）とは、HTMLドキュメントやXMLドキュメントをプログラムから利用するためのAPIである。DOMという標準的な方法を利用することでどのブラウザからも同じようにHTMLドキュメントを操作できる。DOMについて理解することで、Webページを自在に操作することができる。
次回は、要素を取得しイベントハンドラを登録するといったイベントの処理について解説する。
 |
