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