コアライブラリの詳細に踏み込む

前頁までで基本的なAPIの紹介を一通り終えたので、ここからはDojoのコアライブラリの詳細に踏み込んで解説を行っていきたい。まずはDOM/CSSの操作を行うためのAPIを紹介したい。

DOMの操作に使用するAPI

Dojoが用意しているDOM操作用のAPIには、以下のようなものがある。

dojo.place(node, refNode, position)

DojoのDOM操作は、この関数が中心となる。DOM要素nodeが、refNodeからみた相対的な位置 (position) に挿入される。

positionには文字列か数値を指定でき、数値を指定した場合はrefNodeの子要素内の指定した位置にnodeが挿入される。文字列での指定は、以下に示すものが利用できる。

  • before : refNodeの手前に挿入する
  • after : refNodeの後に挿入する
  • first : refNodeの一番最初の子要素として挿入
  • last : refNodeの一番最後の子要素として挿入

DOMオブジェクトを指定する部分には、DOMを指すIDを文字列で指定することもできる。これは、このページで紹介するAPI全てに言えることだ。

使用例は以下の通り。

 var node = dojo.byId("node"), refNode = dojo.byId("refNode");

 // nodeをrefNodeの手前に挿入する
 dojo.place(node, refNode, "before");

 // nodeをrefNodeの子要素の最初に挿入する。
 dojo.place(node, refNode, "first");

 // 上と同じだが、位置を数値で指定
 dojo.place(node, refNode, 0);

dojo.byId(id)

これは以前のページでも説明した。document.getElementById()とほぼ同じ。

dojo.isDescendant(node, ancestor)

ドキュメント上で、DOMオブジェクトnodeが、ancestorの子要素であるかどうかを返す。node, ancestorどちらも、DOMオブジェクトのIDを文字列で渡すことが可能。

dojo.setSelectable(node, selectable)

指定した要素がユーザによって選択可能かどうかを切り替える。nodeはDOMオブジェクトかID文字列、selectableはBoolean型を指定。

CSSの操作に使用するAPI

以下、CSSの操作に使用するAPIについて説明していこう。

dojo.style(node, style, value)

この関数を用いると、要素のスタイルを取得/設定することがどちらも可能だ。nodeはスタイルを設定する対象の要素、styleはスタイルの名称、valueはスタイルの値だ。最後の引数valueを指定すればスタイルの設定、省略時はスタイルの取得となる。また、スタイルの名称は、「borderWidth」のように単語の区切りを大文字にした形で指定する (border-widthではない)。

使用例は以下の通り。

 // 要素の透明度を取得
 var opacityStr = dojo.style("node", "opacity");

 // 数値に変換 (styleの戻り値は文字列)
 var opacity = parseFloat(opacityStr);

 // 透明度を再度指定
 dojo.style("node", "opacity", String(opacity - 0.1));

dojo.hasClass(node, classStr)、dojo.addClass(node, classStr)、dojo.removeClass(node, classStr)、dojo.toggleClass(node, classStr, condition)

要素に関連付けられているクラスを操作する。hasClass()はクラスが指定されているかどうかをBooleanで返す。addClass()、removeClass()はクラスの追加と削除を行う。

toggleClass()は、最後の引数conditionを省略することで、クラス指定のON/OFFを切り替える。

使用例は以下の通り。

 // クラス「selected」が要素に指定されていれば削除、
 // 指定されていなければ追加を行う
 if (dojo.hasClass("node", "selected")) {
   dojo.removeClass("node", "selected");
 } else {
   dojo.addClass("node", "selected");
 }

 // 上と同じ処理をtoggleClass()で行う
 dojo.toggleClass("node", "selected");