MooTools-DOM操作

すべてのHTMLページがDOM要素を使用して設計されていることは既にわかっています。 MooToolsを使用すると、DOM要素を操作できます。つまり、DOM要素のスタイルを作成、削除、変更できます。

基本的な方法

以下は、DOM要素のプロパティをキャプチャして変更するのに役立つ基本的な方法です。

取得する（）

このメソッドは、src、value、nameなどの要素プロパティを取得するために使用されます。次の文は、getメソッドの構文です。

構文

//this will return the html tag (div, a, span...) of the element
$('id_name').get('tag');

get（）メソッドを使用して要素を取得すると、次のプロパティのリストを受け取ります。

id
name
値
href
src
クラス（要素の場合、すべてのクラスを返します）
テキスト（要素のテキストコンテンツ）

セット（）

このメソッドは、変数に値を設定するために使用されます。これはイベントと組み合わせると便利で、値を変更できます。次のステートメントは、setメソッドの構文です。

構文

//this will set the href of #id_name to "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');

erase（）

このメソッドは、elementsプロパティの値を消去するのに役立ちます。要素から消去するプロパティを選択する必要があります。次の文は、erase（）メソッドの構文です。

構文

//this will erase the href value of #id_name
$('id_name').erase('href');

要素の移動

要素の移動とは、既存の要素をページ上のある位置から別の位置に移動することです。 inject（）メソッドを使用して、ページ内で要素を移動できます。 1つのHTMLページに3つのdiv要素があり、それぞれコンテンツA、B、Cが順番に含まれている例を考えてみましょう。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var elementA = $('elemA');
            var elementB = $('elemB');
            var elementC = $('elemC');
         })
      </script>
   </head>

   <body>
      <div id = "body_wrap">
         <div id = "elemA">A</div>
         <div id = "elemB">B</div>
         <div id = "elemC">C</div>
      </div>
   </body>

</html>

次の出力が表示されます-

出力

これで、MooToolsのinject（）メソッドを使用して、順序をABCからACBに変更できます。つまり、elementBをelementCの後に配置し、elementCをelementBの前に配置する必要があります。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var elementA = $('elemA');
            var elementB = $('elemB');
            var elementC = $('elemC');

           //translates to: inject element C before element B
            elementC.inject(elementB, 'before');

           //translates to: inject element B after element C
            elementB.inject(elementC, 'after');
         });
      </script>
   </head>

   <body>
      <div id = "body_wrap">
         <div id = "elemA">A</div>
         <div id = "elemB">B</div>
         <div id = "elemC">C</div>
      </div>
   </body>

</html>

次の出力が表示されます-

出力

新しい要素を作成

MooToolsには、任意のタイプのDOM要素を作成してHTMLページに挿入するオプションがあります。ただし、すべての要素に対して適切な構文を維持する必要があります。次のコードスニペットが（アンカー）要素を作成するための構文である例を見てみましょう。

構文

var el = new Element('a', {
   id: 'Awesome',
   title: 'Really?',
   text: 'I\'m awesome',
   href: 'http://MooTools.net',

   events: {
      'click': function(e) {
         e.preventDefault();
         alert('Yes, really.');
      }
   },
   styles: {
      color: '#f00'
   }
});

MooToolsライブラリを使用してアンカー要素を作成する例を見てみましょう。次のコードを見てください。

例

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

      <script type = "text/javascript">
         window.addEvent('domready', function() {

            var el = new Element('a', {
               id: 'Awesome',
               title: 'Really?',
               text: 'I\'m awesome',
               href: 'http://www.finddevguides.com',

               events: {
                  'click': function(e) {
                     e.preventDefault();
                     alert('Yes, really.');
                  }
               },
               styles: {
                  color: '#f00'
               }
            });
            el.inject(document.body);
         });
      </script>
   </head>

   <body>
   </body>

</html>

次の出力が表示されます-

出力

Mootools-dom-manipulations

MooTools-DOM操作

基本的な方法

取得する（）

構文

セット（）

erase（）

要素の移動

例

出力

例

出力

新しい要素を作成

構文

例

出力

目次