MooTools - DOM 操作

我们已经知道每个 HTML 页面都是使用 DOM 元素设计的。使用 MooTools，您可以操作 DOM 元素，这意味着您可以创建、删除和更改 DOM 元素的样式。

基本方法

以下是捕获并帮助修改 DOM 元素属性的基本方法。

get()

此方法用于检索元素属性，例如 src、value、name 等。以下语句是 get 方法的语法。

语法

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

使用 get() 方法检索元素时，您将收到以下属性列表。

id
name
value
href
src
class（如果元素存在，将返回所有类）
text（元素的文本内容）

set()

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

语法

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

erase()

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

语法

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

移动元素

移动元素意味着将现有元素从页面上的一个位置移动到另一个位置。您可以使用 inject() 方法在页面周围移动元素。让我们举一个例子，其中一个 HTML 页面包含三个 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。这意味着我们需要将元素 B 放置在元素 C 之后，并将元素 C 放置在元素 B 之前。请查看以下代码。

示例

<!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: 'https://tutorialspoint.com',
               
               events: {
                  'click': function(e) {
                     e.preventDefault();
                     alert('Yes, really.');
                  }
               },
               styles: {
                  color: '#f00'
               }
            });
            el.inject(document.body);
         });
      </script>
   </head>
   
   <body>
   </body>
   
</html>

您将收到以下输出 -

输出

打印页面