MooTools - Utilisation de tableaux

MooTools est une bibliothèque JavaScript légère qui permet de créer des pages Web dynamiques. Lors de la gestion de l'élément DOM, nous devons sélectionner tous les éléments DOM d'une page Web. Cette collection peut être gérée à l'aide de tableaux.

Ce chapitre explique comment utiliser les tableaux pour gérer les éléments DOM.

méthode each ()

Il s'agit de la méthode de base pour traiter les tableaux. Il itère tous les éléments à travers une liste. Vous pouvez utiliser cette méthode en fonction de l'exigence. Par exemple, si vous souhaitez sélectionner tous les éléments div d'une page, suivez le script ci-dessous. Jetez un œil à la page html suivante qui contient plusieurs divs.

<div>One</div>
<div>Two</div>

Vous pouvez utiliser le script suivant pour sélectionner each individual divà partir d'une collection de div sur la page. Le script sélectionnera chaque div et passera une alerte. Jetez un œil au script suivant.

Scénario

$$('div').each(function() {
   alert('a div');
});

Vous pouvez utiliser la syntaxe suivante pour gérer l'exemple ci-dessus. Jetez un œil à la page HTML.

Scénario

<div id = "body_div">
   <div>One</div>
   <div>Two</div>
</div>

Ici, les deux div sont entourés d'un autre div - body_div. Lors de la conception d'un script, nous ne devons sélectionner qu'un seul div externe. Plus tard, en utilisant la méthode getElements (), nous pouvons sélectionner les deux div internes. Jetez un œil au script suivant.

Scénario

$('body_wrap').getElements('div').each(function() {
   alert('a div');
});

Vous pouvez utiliser une méthode différente pour écrire le script ci-dessus comme suit. Ici, nous utilisons une variable distincte pour sélectionner lebody_div.

Scénario

var myArray = $('body_div').getElements('div');
myArray.each(function() {
   alert('a div');
});

Sélectionner des éléments spécifiques dans un tableau

Lors de la manipulation d'un tableau d'éléments, nous pouvons sélectionner un élément spécifique dans un tableau d'éléments. Voici quelques méthodes importantes utilisées pour manipuler les éléments DOM -

getLast ()

Cette méthode retourne le dernier élément d'un tableau. Configurons un tableau pour comprendre cette méthode.

var myArray = $('body_div').getElements('div');

Nous pouvons maintenant saisir le dernier élément du tableau.

var lastElement = myArray.getLast();

La variable lastElement représente maintenant le dernier élément de myArray.

getRandom ()

La méthode getRandom () fonctionne de la même manière que la méthode getLast (), mais obtiendra un élément aléatoire du tableau.

Syntax

var randomElement = myArray.getRandom();

La variable randomElement représente maintenant un élément choisi au hasard dans myArray.

Copie d'un tableau

MooTools fournit un moyen de copier un tableau en utilisant la fonction $ A (). Voici la syntaxe de la fonction $ A ().

Syntaxe

var <variable-name> = $A ( <array-variable>);

Ajouter un élément à un tableau

Il existe deux méthodes différentes pour ajouter des éléments dans un tableau. La première méthode vous permet d'ajouter des éléments un par un ou vous pouvez fusionner deux tableaux différents en un seul.

comprendre()

La méthode include () est utilisée pour ajouter un élément dans un tableau d'éléments DOM. Par exemple, considérez le code HTML suivant qui contient deux éléments div et un élément span sous un div unique et inclus -body_div.

Syntax

<div id = "body_div">
   <div>one</div>
   <div>two</div>
   <span id = "add_to_array">add to array</span>
</div>

Dans le code ci-dessus, si nous appelons la méthode getElements ('div') sur le body_divélément, nous obtenons un et deux div mais l'élément span n'est pas inclus dans le tableau. Si vous souhaitez l'ajouter au tableau que vous appelezinclude()méthode sur la variable de tableau. Jetez un œil au script suivant.

Script

//creating array variable by selecting div elements
var myArray = $('body_wrap').getElements('div');

//first add your element to a var
var newToArray = $('add_to_array');

//then include the var in the array
myArray.include(newToArray);

Désormais, myArray contient à la fois l'élément div et span.

combiner()

Cette méthode est utilisée pour combiner les éléments d'un tableau avec les éléments d'un autre tableau. Cela prend également en charge le contenu dupliqué. Par exemple, considérons le code HTML suivant qui contient deux éléments div et deux éléments span sous un div unique et inclus -body_div.

Syntax

<div id = "body_div">
   <div>one</div>
   <div>two</div>
   <span class = "class_name">add to array</span>
   <span class = "class_name">add to array, also</span>
   <span class = "class_name">add to array, too</span>
</div>

Dans le code ci-dessus, appelez la méthode getElements ('div') sur le body_divélément. Vous obtenez un et deux div. L'appel de la méthode $$ ('. Class_name') sélectionne les deux éléments span. Vous avez maintenant un tableau d'éléments div et un autre tableau d'éléments span. Si vous souhaitez fusionner ces deux tableaux, vous pouvez utiliser la méthode combine (). Jetez un œil au script suivant.

Script

//create your array just like we did before
var myArray= $('body_wrap').getElements('div');

//then create an array from all elements with .class_name
var newArrayToArray = $$('.class_name');

//then combine newArrayToArray with myArray
myArray.combine(newArrayToArray );

Maintenant, le myArray contient tous les éléments de la variable newArrayToArray.

Example

Cela vous aidera à comprendre les tableaux dans MooTools. Supposons que nous appliquions la couleur d'arrière-plan au tableau d'éléments qui contient divs et span. Jetez un œil au code suivant. Ici, le deuxième tableau d'éléments n'appartient à aucun identifiant ou groupe de classes et c'est pourquoi il ne reflète aucune couleur d'arrière-plan. Jetez un œil au code suivant.

<!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 myArray = $('body_wrap').getElements('.class_name');
            var addSpan = $('addtoarray');
            var addMany = $$('.addMany');
            
            myArray.include(addSpan);
            myArray.combine(addMany);
            
            var myArrayFunction = function(item) {
               item.setStyle('background-color', '#F7DC6F');
            }
            
            myArray.each(myArrayFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_wrap">
         <div class = "class_name">one</div>
         <div>two</div>
         <div class = "class_name">three</div>
         <span id = "addtoarray">add to array</span>
         <br /><span class = "addMany">one of many</span>
         <br /><span class = "addMany">two of many</span>
      </div>
   </body>
   
</html>

Vous recevrez la sortie suivante -

Output