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
姓名
价值
链接地址
源代码
类（如果该元素将返回所有类）
文本（元素的文本内容）

放（）

该方法用于为变量设置值。这在与事件结合使用时非常有用，并允许您更改值。以下语句是 set 方法的语法。

句法

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

擦除（）

此方法可帮助您删除元素属性的值。您需要选择要从元素中删除的属性。以下语句是erase()方法的语法。

句法

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

移动元素

移动元素意味着将现有元素从页面上的一个位置移动到另一个位置。您可以使用inject() 方法在页面中移动元素。举个例子，一个HTML页面包含三个div元素，这三个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.tutorialspoint.com',
               
               events: {
                  'click': function(e) {
                     e.preventDefault();
                     alert('Yes, really.');
                  }
               },
               styles: {
                  color: '#f00'
               }
            });
            el.inject(document.body);
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

您将收到以下输出 -