MooTools - Manipulações DOM

Já sabemos que toda página HTML é projetada usando elementos DOM. Usando MooTools você pode manipular elementos DOM, o que significa que você pode criar, remover e alterar o estilo dos elementos DOM.

Métodos básicos

A seguir estão os métodos básicos que capturam e ajudam a modificar as propriedades dos elementos DOM.

pegue()

Este método é usado para recuperar as propriedades do elemento, como src, valor, nome, etc. A instrução a seguir é a sintaxe do método get.

Sintaxe

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

Você receberá a seguinte lista de propriedades enquanto recupera o elemento usando o método get ().

id
name
value
href
src
classe (retornará todas as classes se o elemento)
texto (o conteúdo de texto de um elemento)

conjunto()

Este método é usado para definir um valor para uma variável. Isso é útil quando combinado com eventos e permite alterar os valores. A instrução a seguir é a sintaxe do método set.

Syntax

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

apagar()

Este método ajuda a apagar o valor de uma propriedade de elementos. Você precisa escolher qual propriedade deseja apagar do elemento. A instrução a seguir é a sintaxe do método erase ().

Syntax

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

Elementos Móveis

Mover elemento significa mover um elemento existente de uma posição para outra posição na página. Você pode usar o método inject () para mover um elemento pela página. Vejamos um exemplo em que uma página HTML contém três elementos div que contêm o conteúdo A, B e C respectivamente em um pedido. Dê uma olhada no código a seguir.

Exemplo

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

Você receberá a seguinte saída -

Resultado

Agora, usando o método inject () na MooTools, podemos mudar a ordem de ABC para ACB. Isso significa que precisamos colocar o elemento B após o elemento C e colocar o elemento C antes do elemento B. Dê uma olhada no código a seguir.

Exemplo

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

Você receberá a seguinte saída -

Resultado

Criar Novo Elemento

MooTools oferece uma opção para criar qualquer tipo de elemento DOM e inseri-lo na página HTML. Mas, temos que manter uma sintaxe adequada para cada elemento. Vamos dar um exemplo em que, o fragmento de código a seguir é a sintaxe para criar um elemento (âncora).

Sintaxe

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

Vamos dar um exemplo que criará um elemento âncora usando a biblioteca MooTools. Dê uma olhada no código a seguir.

Exemplo

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

Você receberá a seguinte saída -

Resultado