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

dojo/dom-construct

dojo/dom-constructはDOM組み立てるためのdojoのAPIです。dojo内では、domConstructという名前で使っている事が多いようです。

toDom

文字列からDOMノードを構築します。不正な文字列だった場合にはそのまま文字列が返ってきます。

引数	説明
String	HTML文字列
DocumentNode	オプション。nodeを作るときに使用するDocument。dojo/_base/window::docが使われます。iframeやframe、windowが絡んでこない場合には普通指定しないと思います。

toDomはあくまでもDOMノードを作成するだけですので、後述のplaceなどでドキュメントに追加してあげる必要があります。

place

DOMノードを配置します。

引数	説明
String/DOMノード	HTML文字列かID文字列か、DOMノード。配置したい対象です。
String/DOMノード	ID文字列かDOMノード。DOMノードを配置する位置指定のための起点を指定します。次の引数で、このDOMノードからの相対位置で配置する場所を指定します。
String	オプション。数値もしくは以下の固定の文字列を指定します。before, after, replace, only, first, last。指定されなかった場合lastとなります。

before	起点となるDOMノードの前
after	起点となるDOMノードの後
replace	起点となるDOMノードと置き換え
only	起点となるDOMノードの子をすべて削除し、DOMノードの子として配置
first	起点となるDOMノードの子の先頭
last	起点となるDOMノードの子の最後尾
数値	起点となるDOMノードの子のN番目に配置

引数の指定で色々な位置に配置できるというのが特徴的な感じでしょうか。

create

DOMノードを構築して、属性を設定して、配置します。ソースコードを読むとわかりますが、ほんとそのままです。最後の二つの引数はplaceにそのまま引き渡しています。

引数	説明
String/DOMノード	タグ名('div'とか'p'とか)か、DOMノード。
オブジェクト	オプション。属性値です。
String/DOMノード	オプション。ID文字列かDOMノード。DOMノードを配置する位置指定のための起点を指定します。次の引数で、このDOMノードからの相対位置で配置する場所を指定します。指定しなかった場合、createの中では配置されないので、自分でplaceなどで配置する必要があります。
String	オプション。数値もしくは以下の固定の文字列を指定します。before, after, replace, only, first, last。指定されなかった場合lastとなります。

empty

指定したDOMノードの子を削除します。

引数	説明
String/DOMノード	HTML文字列かID文字列か、DOMノード。

destroy

指定したDOMノードを削除します。

引数	説明
String/DOMノード	HTML文字列かID文字列か、DOMノード。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      .sample{
        border: 1px solid red;
      }
      .hoge{
        height: 200px;
        width: 350px;
      }
      .fuga{
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <script src="dojo/dojo.js"
      data-dojo-config="async: true"></script>
    <script>
      require(['dojo/dom-construct','dojo/dom','dojo/on','dojo/domReady!'], function(domConstruct,dom,on){
        on(dom.byId('btn'),'click',function(){
          var div1 = domConstruct.toDom('<div id="test" class="sample hoge"></div>');
          var div2 = domConstruct.create('div',{ class: 'hoge fuga'},'diva','after');
          domConstruct.place(div1, 'divc','before');
          domConstruct.empty('diva')
          domConstruct.destroy('divb')
        });
      });
    </script>
      <button id="btn">process</button>
      <div id="diva" class="sample fuga">
        <span>TEST</span>
        <span>TEST</span>
        <span>TEST</span>
      </div>
      <div id="divb" class="sample fuga">
        <span>TEST</span>
        <span>TEST</span>
        <span>TEST</span>
      </div>
      <div id="divc" class="sample fuga">
      </div>
  </body>
</html>