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

您將收到以下輸出 -

輸出

列印頁面