Dojo：きほんのき③ - DOM（前編）-

ArcGIS API for JavaScript は Dojo Toolkit と呼ばれるオープンソースのライブラリをベースに開発されています。
本連載では、はじめて Dojo を使う方を対象に、Dojo の基本をご紹介しています。

前回は Dojo が導入するモジュールシステムについてご説明しました。
今回は、DOM（Document Object Model）を Dojo から利用する方法について、DOM ノードの取得や作成などの基本的な操作の流れとともにご紹介します。

DOM ノードを取得してみよう

普段、どのような方法で DOM を利用していますか？
一般的な方法としては、document オブジェクトを使うことではないでしょうか。
あるいは jQuery を使っている方は $("#hoge") このような形がすぐに頭に思い浮かぶかもしれません。

Dojo の世界で DOM ノードを取得するためにもっとも簡単でよく使われる方法は "dojo/dom" モジュールの byId メソッドを使うことです。

dom.byId(id);

id：取得したい DOM ノードの ID。渡した ID を持つ DOM ノードを返します。DOM ノードが見つからない場合は null を返します。

次のサンプルは、Web マップを参照し、地図に表示するアプリです。
Web マップにはさまざまな情報が含まれています。今回はWeb マップのタイトルを、dom.byId() を使い取得した DOM ノードに表示しています。

※ 画像をクリックするとソースコードを表示します。

DOM ノードを作ってみよう

DOM を利用する上で、DOM ノードの取得とともによく使われるのは DOM ノードの作成ではないでしょうか？
document オブジェクトでは createElement メソッドが使用されますね。

Dojo で新しく DOM ノードを作成するには、"dojo/dom-construct" モジュールの create メソッドを使用します。
domConstruct.create() は DOM ノードの作成や配置などの一連の操作をシンプルにコーディングできるようデザインされています。

domConstruct.create(tag, attrs, refNode, pos);

tag：作成したい要素の文字列（例："div"、"a"、"p"、"li"、"script"、"br"）
attrs（オプション）：要素の属性のオブジェクト（例：{innerHTML: "こんにちは", color: "red"}、{href: "help.html", title: "ヘルプ", innerHTML: "ヘルプ"}）
refNode（オプション）：作成した要素を配置する DOM ノードまたは DOM ノードの ID
pos（オプション）：refNode 内の相対位置。有効な値は以下の通り（デフォルトの値は"last"）
- "after"：refNode の親要素の子要素として refNode の直後に配置する
- "before"：refNode の親要素の子要素として refNode の直前に配置する
- "first"：refNode の最初の子要素として配置する
- "last"：refNode の最後の子要素として配置する
- "only"：refNode のすべての子要素と置換する
- "replace"：refNode と置換する
- 数値：refNode の n 番目の子要素として置換する

では、先ほどと同じように Web マップを読み込み、タイトルを表示してみましょう。
先ほどは、infoPanel という ID を持つ DOM ノードを取得し、infoPanel 直下にタイトルを表示していました。
今回は新しく p 要素を作成し、infoPanel の最初の子要素として配置して、その中にタイトルを表示します。

"dojo/dom-construct" には、DOM ノードを作成するメソッドがもうひとつ用意されています。

HTML 文字列から DOM ノードを作成する、domConstruct.toDom() です。

domConstruct.toDom(frag, doc);

frag：DOM ノードへ変換する HTML 文字列
doc（オプション）：DocumentFragment。デフォルトは dojo/_base/window::doc（現在の document オブジェクト）。

domConstruct.toDom() は domConstruct.create() と違い、作成した DOM ノードをドキュメント内に配置するための引数が用意されていません。

作成した DOM ノードを配置するには、次のセクションで紹介する domConstruct.place() を使います。

DOM ノードを配置してみよう

すでにある DOM ノードをドキュメントに配置するときに使用するのが、domConstruct.place() です。

domConstruct.place(node, refNode, pos);

node：配置したい DOM ノードまたは DOM ノードの ID
refNode：配置先の DOM ノードまたは DOM ノードの ID
pos（オプション）：refNode 内の相対位置

次のサンプルは新たに作成した DOM ノードに Web マップの概要を表示しています。

DOM ノードの作成には、domConstruct.toDom() を使い HTML 文字列から新しい DOM ノードを作成しています。

そして、作成した DOM ノードを domConstruct.place() を使い配置します。

DOM ノードを削除してみよう

Dojo は DOM ノードを削除する２つのメソッドを dojo/dom-construct モジュールに用意しています。

domConstruct.destroy() は対象となる DOM ノード自体を削除し、domConstruct.empty() は対象となる DOM ノードに含まれる子要素を削除します。

domConstruct.destroy(node);

node：削除したい DOM ノードまたは ID。渡した DOM ノードと DOM ノードに含まれるすべての子要素を削除します

domConstruct.empty(node);

node：削除したい DOM ノードまたは ID。渡した DOM ノードに含まれるすべての子要素を削除します

次のサンプルは infoPanel 要素をクリックすると、infoPanel 要素と infoPanel 要素に含まれるすべての子要素を削除します。

※ "dojo/on" はイベントハンドラのモジュールです。詳細は次々回にご説明する予定ですが、ここでは infoPanel 要素をクリックすると第 3 引数に渡されたコールバック関数を実行します。

Dojo のモジュールを使った DOM ノードの取得、作成、配置、削除と DOM を利用する基本的な操作方法をご説明しました。

もちろん、これらの操作は document オブジェクトが用意する各メソッドを使うことで実現可能です。

しかし、Dojo のモジュールを利用することで、シンプルな記述で DOM を簡単に利用できるほか、ブラウザーごとに異なる挙動を吸収することができます。

次回はここでは紹介しきれなかった Dojo が提供する DOM をサポートするモジュールをご説明したいと思います。

Dojo：きほんのき③ - DOM（前編）-