MooTools - Manipulaciones DOM

Ya sabemos que cada página HTML está diseñada con elementos DOM. Usando MooTools puede manipular elementos DOM, lo que significa que puede crear, eliminar y cambiar el estilo de elementos DOM.

Métodos básicos

Los siguientes son los métodos básicos que capturan y ayudan a modificar las propiedades de los elementos DOM.

obtener()

Este método se utiliza para recuperar las propiedades del elemento como src, valor, nombre, etc. La siguiente declaración es la sintaxis del método get.

Sintaxis

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

Recibirá la siguiente lista de propiedades mientras recupera el elemento usando el método get ().

id
name
value
href
src
clase (devolverá todas las clases si el elemento)
texto (el contenido de texto de un elemento)

conjunto()

Este método se utiliza para establecer un valor en una variable. Esto es útil cuando se combina con eventos y le permite cambiar valores. La siguiente declaración es la sintaxis del 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');

borrar()

Este método le ayuda a borrar el valor de una propiedad de los elementos. Debe elegir qué propiedad desea borrar del elemento. La siguiente declaración es la sintaxis del método erase ().

Syntax

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

Elementos en movimiento

Mover elemento significa mover un elemento existente de una posición a otra en la página. Puede utilizar el método inject () para mover un elemento por la página. Tomemos un ejemplo en el que una página HTML contiene tres elementos div que contienen el contenido A, B y C respectivamente en un orden. Eche un vistazo al siguiente código.

Ejemplo

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

Recibirá el siguiente resultado:

Salida

Ahora, usando el método inject () en MooTools, podemos cambiar el orden de ABC a ACB. Esto significa que debemos colocar elementB después de elementC y colocar elementC antes de elementB. Eche un vistazo al siguiente código.

Ejemplo

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

Recibirá el siguiente resultado:

Salida

Crear nuevo elemento

MooTools ofrece una opción para crear cualquier tipo de elemento DOM e insertarlo en la página HTML. Pero tenemos que mantener una sintaxis adecuada para cada elemento. Tomemos un ejemplo en el que el siguiente fragmento de código es la sintaxis para crear un elemento (ancla).

Sintaxis

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

Tomemos un ejemplo que creará un elemento de anclaje usando la biblioteca MooTools. Eche un vistazo al siguiente código.

Ejemplo

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

Recibirá el siguiente resultado:

Salida

↰ Previous page Next page ↱