コアライブラリの詳細に踏み込む
前頁までで基本的な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");
