Médiaforma

getElementsByTagName

Print Friendly

Dans les rubriques précédentes, vous avez appris à accéder à des balises HTML en utilisant les fonctions JavaScript getElementById() et getElementsByName(). Ces fonctions sont très pratiques, mais elles nécessitent la définition d’attributs id ou name dans chacune des balises visées.

Dans cette rubrique, je vais vous présenter la fonction getElementsByTagName() qui permet de récupérer toutes les balises d’un certain type sans que celles-ci n’aient un attribut id ou name. Le résultat de la fonction est un tableau et chaque élément du tableau correspond à une balise.

Pour illustrer cette fonction, nous allons utiliser le code HTML de la rubrique précédente. Rappelons que ce code contient :

  • une balise <div> d’identifiant div1 ;
  • trois cases à cocher ;
  • un bouton de commande.

A titre d’exemple, la fonction getElementsByTagName() sera utilisée pour compter le nombre de balises <input> contenues dans le document. Le code JavaScript est défini dans la fonction test(), entre les lignes 5 et 9.

La ligne 7 définit la variable lesInput et l’initialise avec le résultat de la fonction getElementsByTagName(). L’argument « input » est passé à cette fonction, car on cherche à compter le nombre de balises< input> contenues dans le document.

Rappelez-vous : la fonction getElementsByTagName() retourne un tableau. La ligne 8 applique la fonction length à la variable lesInput pour connaître le nombre d’éléments contenus dans le tableau et donc, le nombre de balises <input> contenues dans le document. Le résultat est affiché dans la balise <div> en utilisant la technique habituelle. A savoir, la fonction innerHTML appliquée à l’objet div.

Exécutons ce code dans un navigateur. Un clic sur le bouton de commande affiche le nombre de balises <input> contenues dans le document :

Remarque
Il est possible de connaitre les valeurs stockées dans les attributs des balises récupérées avec la fonction getElementsByTagName(). Ainsi par exemple :

  • lesInput[2].name renvoie la valeur « couleur », puisque l’attribut name de la troisième balise <input> vaut couleur.
  • lesInput[3].value renvoie la valeur « Cliquez ici » puisque l’attribut value de la quatrième balise <input> vaut « Cliquez ici ».

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply