MooTools - Manipulations DOM

Nous savons déjà que chaque page HTML est conçue à l'aide d'éléments DOM. En utilisant MooTools, vous pouvez manipuler des éléments DOM, ce qui signifie que vous pouvez créer, supprimer et modifier le style des éléments DOM.

Méthodes de base

Voici les méthodes de base qui capturent et aident à modifier les propriétés des éléments DOM.

avoir()

Cette méthode est utilisée pour récupérer les propriétés de l'élément telles que src, valeur, nom, etc. L'instruction suivante est la syntaxe de la méthode get.

Syntaxe

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

Vous recevrez la liste suivante de propriétés lors de la récupération de l'élément à l'aide de la méthode get ().

  • id
  • name
  • value
  • href
  • src
  • class (retournera toutes les classes si l'élément)
  • text (le contenu textuel d'un élément)

ensemble()

Cette méthode est utilisée pour définir une valeur sur une variable. Ceci est utile lorsqu'il est combiné avec des événements et vous permet de modifier les valeurs. L'instruction suivante est la syntaxe de la méthode set.

Syntax

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

effacer()

Cette méthode vous aide à effacer la valeur d'une propriété d'éléments. Vous devez choisir la propriété que vous souhaitez effacer de l'élément. L'instruction suivante est la syntaxe de la méthode erase ().

Syntax

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

Éléments mobiles

Déplacer un élément signifie déplacer un élément existant d'une position à une autre position autour de la page. Vous pouvez utiliser la méthode inject () pour déplacer un élément dans la page. Prenons un exemple dans lequel, une page HTML contient trois éléments div qui contiennent respectivement le contenu A, B et C dans un ordre. Jetez un œil au code suivant.

Exemple

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

Vous recevrez la sortie suivante -

Production

Maintenant, en utilisant la méthode inject () dans MooTools, nous pouvons changer l'ordre de ABC à ACB. Cela signifie que nous devons placer elementB après elementC et placer l'élémentC avant elementB. Jetez un œil au code suivant.

Exemple

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

Vous recevrez la sortie suivante -

Production

Créer un nouvel élément

MooTools fournit une option pour créer tout type d'élément DOM et l'insérer dans la page HTML. Mais, nous devons maintenir une syntaxe appropriée pour chaque élément. Prenons un exemple dans lequel, l'extrait de code suivant est la syntaxe pour créer un élément (d'ancrage).

Syntaxe

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

Prenons un exemple qui créera un élément d'ancrage à l'aide de la bibliothèque MooTools. Jetez un œil au code suivant.

Exemple

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

Vous recevrez la sortie suivante -

Production