MooTools - Thao tác DOM

Chúng ta đã biết rằng mọi trang HTML đều được thiết kế bằng cách sử dụng các phần tử DOM. Sử dụng MooTools, bạn có thể thao tác các phần tử DOM, nghĩa là bạn có thể tạo, xóa và thay đổi kiểu của các phần tử DOM.

Các phương pháp cơ bản

Sau đây là các phương thức cơ bản giúp nắm bắt và giúp sửa đổi các thuộc tính của các phần tử DOM.

được()

Phương thức này dùng để truy xuất các thuộc tính của phần tử như src, value, name,… Câu lệnh sau là cú pháp của phương thức get.

Cú pháp

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

Bạn sẽ nhận được danh sách các thuộc tính sau khi truy xuất phần tử bằng phương thức get ().

id
name
value
href
src
lớp (sẽ trả về tất cả các lớp nếu phần tử)
text (nội dung văn bản của một phần tử)

bộ()

Phương thức này được sử dụng để đặt giá trị cho một biến. Điều này hữu ích khi kết hợp với các sự kiện và cho phép bạn thay đổi giá trị. Câu lệnh sau là cú pháp của phương thức set.

Syntax

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

xóa()

Phương pháp này giúp bạn xóa giá trị của thuộc tính phần tử. Bạn cần chọn thuộc tính mà bạn muốn xóa khỏi phần tử. Câu lệnh sau là cú pháp của phương thức delete ().

Syntax

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

Yếu tố chuyển động

Di chuyển phần tử có nghĩa là di chuyển một phần tử hiện có từ vị trí này sang vị trí khác trên trang. Bạn có thể sử dụng phương thức tiêm () để di chuyển một phần tử xung quanh trang. Hãy để chúng tôi lấy một ví dụ trong đó, một trang HTML chứa ba phần tử div chứa nội dung A, B và C tương ứng theo một thứ tự. Hãy xem đoạn mã sau.

Thí dụ

<!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>

Bạn sẽ nhận được kết quả sau:

Đầu ra

Bây giờ, sử dụng phương thức tiêm () trong MooTools, chúng ta có thể thay đổi thứ tự từ ABC sang ACB. Điều này có nghĩa là, chúng ta cần đặt phần tửB sau phần tửC và đặt phần tửC trước phần tửB. Hãy xem đoạn mã sau.

Thí dụ

<!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>

Bạn sẽ nhận được kết quả sau:

Đầu ra

Tạo phần tử mới

MooTools cung cấp một tùy chọn để tạo bất kỳ loại phần tử DOM nào và chèn nó vào trang HTML. Tuy nhiên, chúng ta phải duy trì một cú pháp thích hợp cho mọi phần tử. Hãy để chúng tôi lấy một ví dụ trong đó, đoạn mã sau là cú pháp để tạo phần tử (anchor).

Cú pháp

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'
   }
});

Hãy để chúng tôi lấy một ví dụ sẽ tạo một phần tử neo bằng cách sử dụng thư viện MooTools. Hãy xem đoạn mã sau.

Thí dụ

<!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>

Bạn sẽ nhận được kết quả sau:

Đầu ra