Récupérer tous les éléments d'une balise en javascript

Développeur PHP à Vendôme (41100) > Récupérer tous les éléments d'une balise

Si toutes les balises <img> ou <a> d'une page doivent être associées à du javascript, plutôt que de le mettre en place dans le code HTML, mieux vaut tout gérer via javascript, notamment pour alléger le code HTML ; de plus, dans le cas où il y a des vérifications à effectuer, cette méthode permet de délester la partie serveur (PHP) de certaines tâches annexes.

getElementsByTagName

La méthode getElementsByTagName permet en une ligne de code de récupérer tous les éléments correspondant à une balise, ceci sous la forme d'un tableau qu'il suffit ensuite de parcourir. Bien entendu, la méthode fonctionne avec n'importe quelle balise (<p>, <span>, <div> etc.).

Par exemple, pour avoir la liste de tous les div: getElementsByTagName('div')

Récupérer tous les liens de la page

Imaginons qu'il faille appeler la fonction "lien()" dès lors qu'un internaute clique sur un lien. Plutôt que traiter individuellement chaque balise <a> avec l'ajout d'un onclick="lien();", traitons-les toutes en une fois grâce à getElementsByTagName:


//on vérifie que la page a fini de charger
window.addEventListener('DOMContentLoaded',function(){

//on détermine la balise à rechercher - ici <a>
balise = document.getElementsByTagName('a');

for(x=0;x<balise.length;x++){

balise[x].onclick = function(){

lien();

}

}

});

Récupérer toutes les images de la page

Autre exemple: toutes les images dont le nom de fichier contient un mot clé, disons "-cuisine-", doivent se voir appliquer une classe CSS particulière. Il est pour l'heure impossible de gérer ça via la feuille de style, en revanche, via javascript, c'est facile:


//on vérifie que la page a fini de charger
window.addEventListener('DOMContentLoaded',function(){

//on détermine la balise à rechercher - ici <a>
balise = document.getElementsByTagName('img');

for(x=0;x<balise.length;x++){

if(balise[x].src.split('-cuisine-').length > 1){

balise[x].className = 'cuisine';

}

}

});

Au passage, oui, une expression régulière aurait été plus élégante. Mais comme dans ce cas de figure un bon vieux split fonctionne très bien, à quoi bon alourdir le code ?

Par , publié sur feu-sacre.net le 26-03-2019

Commentaires des internautes

Cliquer ici pour publier un commentaire (aucune inscription requise).