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

dojo/dom-class

dojo/dom-classはDOMのclassを操作するためのdojoのAPIです。dojo内では、domClassという名前で使っている事が多いようです。

containes

対象のDOMに指定したクラスが設定されているかをtrue/falseで返します。

引数	説明
Object/string	対象のdomNodeもしくはそのId
string	CSSのクラス名

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      .sample{
        background-color: gray;
        border: 1px solid red;
      }
      .hoge{
        width: 350px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <script src="dojo/dojo.js"
      data-dojo-config="async: true"></script>
    <script>
      require(['dojo/dom-class','dojo/domReady!'], function(domClass){
        console.log(domClass.contains('diva','hoge'));
        console.log(domClass.contains('diva','fuga'));
      });
    </script>
      <div id="diva" class="sample hoge">TEST</div>
  </body>
</html>

まぁ、あまり特筆すべきところはありませんね。

add

指定したDOMに対して、指定したclassを追加します。既に設定されているclassについては追加されません。class名はスペースで区切ったり、配列で渡す事で複数のclass名を一度に設定する事も出来ます。

引数	説明
string/domNode	classを追加したいdomNodeもしくはそのId
string/Array	追加したいclass名もしくはclass名の配列

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      .sample{
        background-color: gray;
        border: 1px solid red;
      }
      .hoge{
        width: 350px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <script src="dojo/dojo.js"
      data-dojo-config="async: true"></script>
    <script>
      require(['dojo/dom-class','dojo/dom-attr','dojo/domReady!'], function(domClass,domAttr){
        domClass.add('diva', 'sample');
        domClass.add('diva', 'hoge');
        domClass.add('divb', 'sample');
        domClass.add('divb', 'hoge');
        domClass.add('divc', 'sample hoge');
        domClass.add('divd', ['sample','hoge']);

        console.log(domAttr.get('diva','class'));
        console.log(domAttr.get('divb','class'));
        console.log(domAttr.get('divc','class'));
        console.log(domAttr.get('divd','class'));
      });
    </script>
      <div id="diva" class="sample">TEST</div>
      <div id="divb">TEST</div>
      <div id="divc" class="hoge">TEST</div>
      <div id="divd">TEST</div>
  </body>
</html>

remove

DOMから指定したclassを削除します。

引数	説明
string/domNode	属性を設定したいdomNodeもしくはそのId
string/Array	削除したいclass名もしくはその配列

削除したいclass名はスペース区切りの文字列もしくは配列で渡す事も出来ます。明示的に削除したいclass名が指定されなかった場合、すべてのclass名が削除されます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      .sample{
        border: 1px solid red;
      }
      .hoge{
        width: 350px;
        height: 200px;
      }
      .fuga{
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <script src="dojo/dojo.js"
      data-dojo-config="async: true"></script>
    <script>
      require(['dojo/dom-class','dojo/domReady!'], function(domClass){
        domClass.remove('diva','hoge');
        domClass.remove('divb','hoge sample');
        domClass.remove('divc',['hoge','sample']);
        domClass.remove('divd');
      });
    </script>
      <div id="diva" class="sample hoge fuga">TEST</div>
      <div id="divb" class="sample hoge fuga">TEST</div>
      <div id="divc" class="sample hoge fuga">TEST</div>
      <div id="divd" class="sample hoge fuga">TEST</div>
  </body>
</html>

replace

クラス名を置き換えます、というより、削除と追加を同時に行うだけです。なので、別にremoveされる対象がなかったとしても、addされます。まぁ、removeとaddを同時にやるよりは速いようです。

引数として、追加されるclass名が前で、削除されるclass名が後、というのは直感的ではないような気がします。

引数	説明
string/domNode	対象のdomNodeもしくはそのId
string/Array	追加されるclass名もしくはclass名の配列
string/Array	削除されるclass名もしくはclass名の配列

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      .sample{
        border: 1px solid red;
      }
      .sample2{
        border: 2px dotted black;
      }
      .hoge{
        width: 350px;
        height: 200px;
      }
      .hoger2{
        width: 200px;
        height: 350px;
      }
      .fuga{
        background-color: gray;
      }
      .fuga2{
        background-color: red;
      }
    </style>
  </head>
  <body>
    <script src="dojo/dojo.js"
      data-dojo-config="async: true"></script>
    <script>
      require(['dojo/dom-class','dojo/dom','dojo/on','dojo/dom-attr','dojo/domReady!'], function(domClass,dom,on,domAttr){
        on(dom.byId('btn'),'click',function(){
          domClass.replace('diva',['fuga2','hoge2','sample2'],['fuga','hoge','sample']);
          domClass.replace('divb', 'sample','sample2');
          domClass.replace('divc','hoge2',['fuga','hoge']);
          domClass.replace('divd', 'sample2','sample');

          console.log(domAttr.get('diva','class'));
          console.log(domAttr.get('divb','class'));
          console.log(domAttr.get('divc','class'));
          console.log(domAttr.get('divd','class'));
        });
      });
    </script>
      <button id="btn">replace</button>
      <div id="diva" class="sample hoge fuga">TEST</div>
      <div id="divb" class="hoge fuga">TEST</div>
      <div id="divc" class="sample hoge fuga">TEST</div>
      <div id="divd" class="sample">TEST</div>
  </body>
</html>

toggle

指定したDOMノードに対して、class名をトグルします。あったら削除するし、無かったら追加します。オンオフでスタイルを切り替えるような時に使います。

最後の引数は省略可能で、trueを渡したときには事前の状態を問わず、ありの状態にして、falseを渡したときには、なしの状態になります。基本的には省略して使うと思います。

引数	説明
string/domNode	属性を設定したいdomNodeもしくはそのId
string/Array	トグルしたいclass名もしくはその配列
boolean	強制的に追加する(true)か削除する(false)か

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      .sample{
        border: 1px solid red;
      }
      .hoge{
        width: 350px;
        height: 200px;
      }
      .fuga{
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <script src="dojo/dojo.js"
      data-dojo-config="async: true"></script>
    <script>
      require(['dojo/dom-class','dojo/dom','dojo/on','dojo/domReady!'], function(domClass,dom,on){
        on(dom.byId('btn'),'click',function(){
          domClass.toggle('diva',['fuga','hoge','sample']);
          domClass.toggle('divb',['fuga','hoge','sample']);
          domClass.toggle('divc',['fuga','hoge','sample']);
          domClass.toggle('divd',['fuga','hoge','sample'],true);
        });
      });
    </script>
      <button id="btn">Toggle</button>
      <div id="diva" class="sample hoge fuga">TEST</div>
      <div id="divb">TEST</div>
      <div id="divc" class="sample hoge fuga">TEST</div>
      <div id="divd">TEST</div>
  </body>
</html>