Dojoのモジュールについて 2 dojo/dom - H2Databaseを追っかけていたりしたブログ

dojo/dom

dojo/domはコアとなるDOM APIを定義しています。定義されているのはbyId/isDescendant/setSelectableの3つの関数です。byIdはよく使うと思いますが、あとの二つはそれほどでも、という感じです。

サンプル。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
  </head>
  <body>
    <div id="a1">
      <div id="b1">
        <span id="c1">this is C1.</span>
      </div>
      <div id="b2">
        <span id="c2">this is C2.</span>
      </div>
    </div>
    <script src="dojo/dojo.js"
      data-dojo-config="async: true"></script>
    <script>
      require(['dojo/dom','dojo/domReady!'], function(dom){
        var c1 = dom.byId('c1');
        console.log(c1);
        console.log(dom.isDescendant('c1','b2'));
        console.log(dom.isDescendant('c1','b1'));
        dom.setSelectable('c1',true);
        dom.setSelectable('c2',false);
      });
    </script>
  </body>
</html>

dom.byId

引数	説明
string/domNode	取得したいdomNodeのId。domNodeを渡した場合は、そのdomNodeが返ってきます
document(オプション)	探すdocument

dom.byIdはdomNodeをIdで取得します。getElementByIdよりも短いですし、当然ですがどのブラウザでも同じように動きます。第一引数にdomNodeを渡すと、そのままそのdomNodeが返ってきます。

第二引数は、オプションで、どのdocument下で探すかの指定です。デフォルトでは、dojo.docに設定されているdocumentになるようです。明示的に別のdocumentを使いたい時設定します。

dom.isDescendant

引数	説明
string/domNode	子孫となるdomNodeのIdもしくはdomNode
string/domNode	先祖と思われるdomNodeのIdもしくはdomNode

あるdomNodeが、あるdomNodeの子孫であるか判定します。

dom.setSelectable

引数	説明
string/domNode	対象のdomNodeのIdもしくはdomNode
boolean	選択可能とするか

あるdomNodeを選択可能にするかしないか。