ArcGIS API for JavaScript は Dojo Toolkit と呼ばれるオープンソースのライブラリをベースに開発されています。
本連載では、はじめて Dojo を使う方を対象に、Dojo の基本をご紹介しています。
前回は Dojo が導入するモジュール システムについてご説明しました。
今回は、DOM(Document Object Model)を Dojo から利用する方法について、DOM ノードの取得や作成などの基本的な操作の流れとともにご紹介します。
普段、どのような方法で DOM を利用していますか?
一般的な方法としては、document オブジェクトを使うことではないでしょうか。
あるいは jQuery を使っている方は $("#hoge") このような形がすぐに頭に思い浮かぶかもしれません。
Dojo の世界で DOM ノードを取得するためにもっとも簡単でよく使われる方法は "dojo/dom" モジュールの byId メソッドを使うことです。
dom.byId(id);
次のサンプルは、Web マップを参照し、地図に表示するアプリです。
Web マップにはさまざまな情報が含まれています。今回はWeb マップのタイトルを、dom.byId() を使い取得した DOM ノードに表示しています。
※ 画像をクリックするとソースコードを表示します。
DOM を利用する上で、DOM ノードの取得とともによく使われるのは DOM ノードの作成ではないでしょうか?
document オブジェクトでは createElement メソッドが使用されますね。
Dojo で新しく DOM ノードを作成するには、"dojo/dom-construct" モジュールの create メソッドを使用します。
domConstruct.create() は DOM ノードの作成や配置などの一連の操作をシンプルにコーディングできるようデザインされています。
domConstruct.create(tag, attrs, refNode, pos);
では、先ほどと同じように Web マップを読み込み、タイトルを表示してみましょう。
先ほどは、infoPanel という ID を持つ DOM ノードを取得し、infoPanel 直下にタイトルを表示していました。
今回は新しく p 要素を作成し、infoPanel の最初の子要素として配置して、その中にタイトルを表示します。
"dojo/dom-construct" には、DOM ノードを作成するメソッドがもうひとつ用意されています。
HTML 文字列から DOM ノードを作成する、domConstruct.toDom() です。
domConstruct.toDom(frag, doc);
domConstruct.toDom() は domConstruct.create() と違い、作成した DOM ノードをドキュメント内に配置するための引数が用意されていません。
作成した DOM ノードを配置するには、次のセクションで紹介する domConstruct.place() を使います。
すでにある DOM ノードをドキュメントに配置するときに使用するのが、domConstruct.place() です。
domConstruct.place(node, refNode, pos);
次のサンプルは新たに作成した DOM ノードに Web マップの概要を表示しています。
DOM ノードの作成には、domConstruct.toDom() を使い HTML 文字列から新しい DOM ノードを作成しています。
そして、作成した DOM ノードを domConstruct.place() を使い配置します。
Dojo は DOM ノードを削除する2つのメソッドを dojo/dom-construct モジュールに用意しています。
domConstruct.destroy() は対象となる DOM ノード自体を削除し、domConstruct.empty() は対象となる DOM ノードに含まれる子要素を削除します。
domConstruct.destroy(node);
domConstruct.empty(node);
次のサンプルは infoPanel 要素をクリックすると、infoPanel 要素と infoPanel 要素に含まれるすべての子要素を削除します。
※ "dojo/on" はイベントハンドラのモジュールです。詳細は次々回にご説明する予定ですが、ここでは infoPanel 要素をクリックすると第 3 引数に渡されたコールバック関数を実行します。
Dojo のモジュールを使った DOM ノードの取得、作成、配置、削除と DOM を利用する基本的な操作方法をご説明しました。
もちろん、これらの操作は document オブジェクトが用意する各メソッドを使うことで実現可能です。
しかし、Dojo のモジュールを利用することで、シンプルな記述で DOM を簡単に利用できるほか、ブラウザーごとに異なる挙動を吸収することができます。
次回はここでは紹介しきれなかった Dojo が提供する DOM をサポートするモジュールをご説明したいと思います。