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 をサポートするモジュールをご説明したいと思います。
関連リンク
