Dojo ToolkitでDOM操作 - phithonのブログ

この記事はバージョン1.7以降の記法に基づいて書いています。
Dojoではバージョン1.7以降、使う関数ごとに細かくモジュールを指定する必要があるようです。
逆に、依存するモジュールをしっかり指定することで、
通常のライブラリではそのとき使わない機能にまでロード待ちさせられる所を、
そのページで必要な機能だけロードされた瞬間に動かせます。
Dojoの設計方針として、多少記述が面倒くさくなろうとも速度・効率を重視しているようです。

2018/09/30追記：
サンプルのリンク先をJSFiddleに置き換え。

DOMノードの取得

主にdojo/domとdojo/queryを使います。
dojo/domモジュールにはbyIdという関数が定義されていて、document.getElementByIdの代わりに使えます。
dojo/queryでは、CSS セレクタ形式でDOM要素を取得可能で、getElementsByClassNameやgetElementsByTagNameの代わりとして使えます。
以下サンプルです。ブラウザがDOM構造を読み込むのを待つため、dojo/domReady!も指定しています（サンプル）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DojoでDOMノードの取得</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
    data-dojo-config="parseOnLoad:true,async:true,isDebug:true"></script>
</head>
<body>
<ul>
    <li id="one">要素1</li>
    <li id="two">要素2</li>
    <li id="three">要素3
    <ul>
        <li>要素3-1</li>
        <li class="last">要素3-2</li>
    </ul>
    </li>
</ul>
<script>
require([
    "dojo/dom",
    "dojo/query",
    "dojo/domReady!"
], function(dom, query) {
    dom.byId("one").innerHTML += "→byIdで取得されました。";
    // ノードへの参照を取得
    var two = dom.byId("two");
    dom.byId(two).innerHTML += "→ノードへの参照も渡せます。";
    var lasts = query("#three li.last");
    lasts[0].innerHTML += "→複雑な指定はqueryで";
});
</script>
</body>
</html>

DOMノードの属性変更

dojo/dom-attr、dojo/dom-style、dojo/dom-classなどを使います。
特にdom-classでは、クラスの追加や削除、置換、トグルなど細かいメソッドが充実しているようです（サンプル）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DojoでDOMノードの変更</title>
<style>
.greenFont {
    color: green;
}
.blackBorder {
    border: solid black 1px;
}
.pinkFont {
    color: pink;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
    data-dojo-config="parseOnLoad:true,async:true,isDebug:true"></script>
</head>
<body>
<ul>
    <li id="one"><a id="link">要素1</a></li>
    <li id="two">要素2</li>
    <li id="three">要素3</li>
    <li id="four">要素4</li>
</ul>
</body>
<script>
require([
    "dojo/dom",
    "dojo/query",
    "dojo/dom-attr",
    "dojo/dom-style",
    "dojo/dom-class",
    "dojo/domReady!"
], function(dom, query, domAttr, domStyle, domClass) {
    // 指定したノードの属性を変更
    domAttr.set("link", "href", "https://www.google.com/");
    // 対象のノードが
    if (domAttr.has("link", "href")) {
        // 第1引数はidプロパティの値でも、ノードへの参照でもOK
        domAttr.set(dom.byId("link"), "innerHTML", "リンクが設定されています。");
    }
    // 指定したノードのスタイルを変更
    domStyle.set("two", "color", "red");
    var two = dom.byId("two");
    domAttr.set(two, "innerHTML", "現在の色: " + domStyle.get(two, "color"));
    // クラスの設定（それぞれ空白で区切れば同時指定可能）
    // 追加
    domClass.add("three", "greenFont blackBorder");
    var four = dom.byId("four");
    domClass.add(four, "greenFont");
    // 入れ替え
    domClass.replace(four, "pinkFont", "greenFont");
    // トグル
    domClass.toggle(four, "blackBorder");
});
</script>
</html>

DOMノードの作成・追加・削除

dojo/dom-constructを使います。
今回は要素が空になる様子を確認するため、dojo/onモジュールでボタンにイベントを追加しています（サンプル）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DojoでDOMノードの変更</title>
<style>
.greenFont {
    color: green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
    data-dojo-config="parseOnLoad:true,async:true,isDebug:true"></script>
</head>
<body>
<button id="emptyButton">try empty</button>
<ul id="container">
    <li id="one"><a id="link">要素1</a></li>
    <li id="two">要素2</li>
    <li id="three">要素3</li>
</ul>
<script>
require([
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/on",
    "dojo/domReady!"
], function(dom, domConstruct, on) {
    // 第2引数にプロパティを指定して要素を作成
    var li = domConstruct.create("li", {
        innerHTML : "新しい要素です。",
        class : "greenFont"
    });
    // 最初の子要素としてidが"container"の要素に追加
    domConstruct.place(li, "container", "first");
    var li2 = domConstruct.create("li", {
        id : "new2",
        innerHTML : "新しい要素その2です。",
        class : "greenFont"
    });
    // 第3引数を省略すると最後の子要素として追加
    domConstruct.place(li2, "container");
    // 作成時にそのまま設置
    domConstruct.create("li", {
        innerHTML : "新しい子要素その3です。",
        class : "greenFont"
    }, "new2", "before");
    // idが"two"の要素を削除
    domConstruct.destroy("two");
    // ボタンを押すとidが"container"の要素を空に
    on(dom.byId("emptyButton"), "click", function() {
        domConstruct.empty("container");
    });
});
</script>
</body>
</html>