Parcourir tous les calques enfants en Javascript

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Parcourir tous les éléments d'un calque

Avec cette nouvelle astuce Javascript, nous allons apprendre une technique permettant d'optimiser le code et les traitements.



Dans l'exemple illustré par la capture, lorsque l'utilisateur clique sur une icône de la palette, tous les calques du dessous se parent de la couleur choisie. Et pour cela, un code Javascript parcourt tous les calques enfants du calque parent pour influer sur leurs propriétés. Cet exemple de personnalisation n'est qu'un prétexte pour la compréhension de cette technique qui s'avère précieuse dans bien d'autres cas.

Source Html
Pour la mise en place de cette nouvelle astuce Javascript, nous proposons d'appuyer l'étude sur une page Web offrant ces calques avec une mise en page déjà en place.

• Télécharger le fichier compressé parcourir-calque-html.rar en cliquant sur ce lien,
• Puis, le décompresser dans le dossier de votre choix,

Cette décompression fournit le fichier de la page Web à la racine. Il est nommé index.htm. Ses ressources l'accompagnent dans les sous dossiers.

• Double cliquer sur ce fichier index.htm pour l'ouvrir dans le navigateur par défaut,

Nous retrouvons bien la page Web de la présentation. La palette de trois couleurs est placée en haut à gauche dans le cadre aux coins arrondis. Mais à ce stade, un clic sur l'une de ses icônes ne produit aucun effet. Forcément, c'est tout l'intérêt de cette astuce à monter.

• A la racine du dossier de décompression, cliquer droit sur ce fichier index.htm,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,

Nous accédons ainsi à la structure Html de la page Web. La construction qui nous intéresse est placée plus bas dans le code, plus précisément dans le calque d'identifiant contenu.

...
<div id="conteneur">
<div id="contenu">
<!--
Implémentation
-->
<div style="display:block; margin-left:25px;">Choix des couleurs:</div>
<div id="jaune" class="palette" style="margin-left:25px; background-color:#e2df00;" onclick="changerCouleurs('jaune')"></div>
<div id="rouge" class="palette" style="background-color:#f978a3;" onclick="changerCouleurs('rouge')"></div>
<div id="bleu" class="palette" style="background-color:#787bf9;" onclick="changerCouleurs('bleu')"></div>
<br />
<div style="width:100%; height:40px; display:block;">&nbsp;</div>
<div id="auCentre">
<div id="calqueA" class="aspect">Calque A</div>
<div id="calqueB" class="aspect">Calque B</div>
<div id="calqueC" class="aspect">Calque C</div>
<div id="calqueD" class="aspect">Calque D</div>
<div id="calqueE" class="aspect">Calque E</div>
<div id="calqueF" class="aspect">Calque F</div>
<div id="calqueG" class="aspect">Calque G</div>
<div id="calqueH" class="aspect">Calque H</div>
</div>
</div>
</div>
...

Les trois boutons de la palette de couleurs sont matérialisés par des calques (balises Div) associés au style palette (class=palette). Chacun appelle la même fonction Javascript changerCouleur en lui passant son propre identifiant. Cette fonction existe déjà tout en bas du code de la page Html :

...
<script type="text/javascript" language="javascript">
function changerCouleurs(elmt)
{

}
</script>
...

C'est elle que nous allons devoir implémenter pour répandre la couleur cliquée sur tous les calques situés dans le cadre aux coins arrondis. Et ces calques sont tous hébergés par le calque parent d'identifiant auCentre.

Récupérer les calques enfants
Nous l'avons annoncé en préambule de cette formation, l'astuce consiste à engager une boucle Javascript pour parcourir tous les calques enfants de ce calque parent que nous venons de mentionner. Mais avant cela, nous avons besoin de connaître les méthodes de l'objet document permettant de récupérer ces calques et de les stocker dans un tableau de variables.

• Dans les bornes de la fonction, ajouter les deux déclarations suivantes :

function changerCouleurs(elmt)
{
var couleur = document.getElementById(elmt).style.backgroundColor;
var enfants = document.getElementById("auCentre").getElementsByTagName("div");
}

Avant toute chose, nous récupérons la couleur cliquée que nous stockons dans une variable que nous nommons couleur. Pour cela, nous exploitons la méthode getElementById de l'objet document. A cette méthode, nous lui passons le nom du contrôle cliqué (elmt) transmis en argument de la fonction. Maintenant que le calque concerné dans la palette de couleurs et bien pointé, nous exploitons sa propriété style pour descendre jusqu'à son attribut backgroundColor et ainsi récupérer la couleur d'arrière-plan à appliquer.

Ensuite nous déclarons une seconde variable que nous nommons enfants. Par le jeu de l'affectation que nous mettons en place, elle va se transformer en tableau de variables. Tout d'abord, nous pointons sur le calque parent (auCentre) toujours grâce à la méthode getElementById de l'objet document. Ensuite, c'est la méthode getElementsByTagName (Attention au s après Element) qui renvoie la collection des calques enfants contenus dans ce calque parent. Cette collection se transforme en tableau de variables.

Parcourir les calques enfants
Maintenant, il ne nous reste plus qu'à parcourir tous les éléments de ce tableau grâce à une boucle. Nous devons bien sûr débuter ce traitement récursif à partir du premier élément situé à l'indice zéro. Et nous devons le poursuivre jusqu'au dernier élément. Et cette information est retournée en Javascript par la propriété length d'un tableau de variables.

• A la suite du code Javascript, créer la boucle suivante :

function changerCouleurs(elmt)
{
var couleur = document.getElementById(elmt).style.backgroundColor;
var enfants = document.getElementById("auCentre").getElementsByTagName("div");

for(var i=0; i<enfants.length; i++)
{
document.getElementById(enfants[i].id).style.backgroundColor = couleur;
}
}

Grâce à la variable de boucle (i), nous transmettons à chaque passage l'identifiant du calque enfant suivant (enfants[i].id) à la méthode getElementById. Dès lors, nous réalisons l'affectation inverse à celle de la toute première variable pour lui appliquer la couleur cliquée par l'utilisateur.

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Web (ALT + Tab),
• Rafraîchir la page à l'aide de la touche F5 du clavier,
• Puis, cliquer sur les icônes de couleur de la palette,

Comme vous pouvez le voir, à chaque clic, ce sont des modifications globales qui sont effectivement entreprises sur tous les calques enfants grâce à cette nouvelle astuce Javascript.