ArcGIS API for JavaScript は Dojo Toolkit と呼ばれるオープンソースのライブラリをベースに開発されています。
本連載では、はじめて Dojo を使う方を対象に、Dojo の基本をご紹介しています。
前回は Dojo を使った DOM の基本的な利用方法についてご説明しました。
今回は前編では紹介しきれなかった Dojo が提供する DOM に関するモジュールをご紹介します。
前回、DOM ノードを取得する方法として "dojo/dom" モジュールをご紹介しました。
Dojo には、もうひとつ、"dojo/query" が DOM ノードを取得するモジュールとして提供されています。
"dojo/query" は CSS セレクタをもとに DOM ノードを取得し、NodeList と呼ばれる配列を生成します。NodeList には、特定の要素を取り出すなどの基本的な機能のほかに、スタイルの変更や属性の制御など、取得した DOM ノードを操作する機能を追加する、いくつかのモジュールが提供されています。
query(selector, context);
前編では、DOM ノードの作成、追加、削除などの基本的な操作を行うモジュールとして "dom/dom-construct" をご紹介しました。
Dojo では、"dojo/dom-construct" の他に、主に以下の 4 つのモジュールがDOM ノードの操作に使われます。
domAttr.has(node, attr);
対象の DOM ノードが指定した属性を持っているか判定します。持っているときは true を返し、持っていないときは false を返します。
domAttr.get(node, attr);
対象の DOM ノードの指定した属性の値を取得します。指定した属性がない場合は null を返します。
domAttr.set(node, attr, value);
対象の DOM ノードの指定した属性に新しい値を設定します。
domAttr.remove(node, attr);
対象の DOM ノードの指定した属性を削除します。
domAttr.getNodeProp(node, attr);
domAttr.get() と同様に、対象の DOM ノードの指定した属性の値を取得します。指定した属性がない場合は null を返します。
domAttr.get() は指定した属性にユーザーが明示的に値を設定していないとき null を返しますが、domAttr.getNodeProp() は指定した属性にユーザーが明示的に値を設定していないときは HTML が定めるデフォルトの値を取得します。
domProp.get(node, name);
対象の DOM ノードの指定したプロパティの値を取得します。
domProp.set(node, name, value);
対象の DOM ノードの指定したプロパティへ値を設定します。
domClass.contains(node, class);
対象の DOM ノードに指定した CSS クラスが含まれているか判定します。含まれていたら true を返し、含まれていなかったら false を返します。
domClass.add(node, class);
対象の DOM ノードに CSS クラスを追加します。複数のクラスを追加することもできます。
domClass.remove(node, class);
対象の DOM ノードの指定した CSS クラスを削除します。複数のクラスを削除することもできます。
domClass.replace(node, addClass, removeClass);
対象の DOM ノードのクラスを置き換えます。
domClass.toggle(node, class, condition);
対象の DOM ノードに指定したクラスがないときは追加し、あるときは削除します。
domStyle.getComputedStyle(node);
レンダリングされた DOM ノードの現在の状態についての情報を得る、算出されたスタイルを取得します。
domStyle.get();
対象の DOM ノードに適用されているスタイルを取得します。
domStyle.set (node, name, value);
対象の DOM ノードに指定したスタイルを設定します。
では、サンプルを見てみましょう。ここでは、ArcGIS Online が配信している全国市区町村界のデータから任意の都道府県を検索し、属性情報を表示させています。
検索結果を表示する要素は、“dojo/dom-construct” を使用して、新しく作成しています。その際、市区町村ごとに異なるクラスを付与するようにしました。
そして、ボタン要素をクエリし、クリック イベントを結びつけます。イベントのコールバック関数には、各ボタンに対応するクラスをクエリして、ハイライトするよう定義したスタイルを持つクラスを追加するようにしています。
また、サンプルでは "dojo/NodeList-dom" というモジュールを使用しています。これは、クエリの基本的な機能のほかに、追加の機能を提供するモジュールのひとつです。このモジュールを読み込むことで、クエリの戻り値である NodeList から、今回ご紹介してきた “dojo/dom-*” と似た、DOM ノードを操作する機能を利用できるようになります。
※ 画像をクリックするとソースコードを表示します。
このように Dojo には DOM ノードの操作を助けるいくつかのモジュールが用意されており、動的なページの変更をシンプルなコーディングで実現できます。
次回は Dojo が提供するイベントに関するモジュールについてご紹介する予定です。