MooTools - Manipolazioni DOM

Sappiamo già che ogni pagina HTML è progettata utilizzando elementi DOM. Usando MooTools puoi manipolare gli elementi DOM, il che significa che puoi creare, rimuovere e cambiare lo stile degli elementi DOM.

Metodi di base

I seguenti sono i metodi di base che acquisiscono e aiutano a modificare le proprietà degli elementi DOM.

ottenere()

Questo metodo viene utilizzato per recuperare le proprietà dell'elemento come src, value, name, ecc. La seguente istruzione è la sintassi del metodo get.

Sintassi

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

Riceverai il seguente elenco di proprietà durante il recupero dell'elemento utilizzando il metodo get ().

  • id
  • name
  • value
  • href
  • src
  • class (restituirà tutte le classi se l'elemento)
  • testo (il contenuto testuale di un elemento)

impostato()

Questo metodo viene utilizzato per impostare un valore su una variabile. Ciò è utile se combinato con eventi e consente di modificare i valori. La seguente dichiarazione è la sintassi del metodo set.

Syntax

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

cancellare()

Questo metodo ti aiuta a cancellare il valore di una proprietà degli elementi. Devi scegliere quale proprietà vuoi cancellare dall'elemento. La seguente dichiarazione è la sintassi del metodo erase ().

Syntax

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

Elementi in movimento

Spostare un elemento significa spostare un elemento esistente da una posizione a un'altra nella pagina. Puoi usare il metodo inject () per spostare un elemento all'interno della pagina. Prendiamo un esempio in cui una pagina HTML contiene tre elementi div che contengono rispettivamente il contenuto A, B e C in un ordine. Dai un'occhiata al seguente codice.

Esempio

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

Riceverai il seguente output:

Produzione

Ora, usando il metodo inject () in MooTools, possiamo cambiare l'ordine da ABC ad ACB. Ciò significa che dobbiamo posizionare elementB dopo elementC e posizionare elementC prima elementB. Dai un'occhiata al seguente codice.

Esempio

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

Riceverai il seguente output:

Produzione

Crea nuovo elemento

MooTools fornisce un'opzione per creare qualsiasi tipo di elemento DOM e inserirlo nella pagina HTML. Tuttavia, dobbiamo mantenere una sintassi adeguata per ogni elemento. Facciamo un esempio in cui, il seguente frammento di codice è la sintassi per creare un elemento (ancoraggio).

Sintassi

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

Facciamo un esempio che creerà un elemento di ancoraggio utilizzando la libreria MooTools. Dai un'occhiata al seguente codice.

Esempio

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

Riceverai il seguente output:

Produzione