Comment utiliser GetElementsByTagName Méthode dans JavaScript

Ethan Guillot
Comment utiliser GetElementsByTagName Méthode dans JavaScript

Le "getElementByTagName ()"Est la méthode spécifique de l'élément DOM qui renvoie tous les éléments présents dans une page Web avec son nom de balise. Il accepte le «nom de tag«Comme argument et renvoie sa collection en direct qui est apparue dans l'ensemble du document. La collection en direct signifie qu'elle fournit automatiquement la liste mise à jour si l'un des éléments HTML sera ajouté ou supprimé du document.

Ce guide explique comment utiliser le «getElementsByTagName ()»Méthode en JavaScript.

Comment utiliser la méthode "getElementsByTagName ()" dans JavaScript?

Le "getElementByTagName ()"Est principalement utilisé pour accéder à un élément HTML particulier via son nom de balise.

Syntaxe

Var Elements = Document.getElementsByTagName (TagName);

Dans la syntaxe ci-dessus, le «tagname"Correspond à la balise de l'élément qui doit être récupérée.

Maintenant, appliquons le «getElementByTagName ()«Méthode de différentes manières à l'aide des exemples suivants.

Exemple 1: L'application de la méthode «getElementsByTagName ()» pour compter «

" Mots clés

Dans cet exemple, le décompte du «

(paragraphe)«Les balises peuvent être calculées en utilisant le«getElementsByTagName ()”Méthode via la fonction définie par l'utilisateur.

Code HTML

Présentation du code HTML suivant:

Count paragraphe à l'aide de GetElementsByTagName ()


C'est le d'abord paragraphe.


C'est le deuxième paragraphe.


C'est le troisième paragraphe.


C'est le quatrième paragraphe.


Dans le code HTML ci-dessus:

  • Le "

    »Indique la première sous-position.

  • Le "

    »Tag définit les paragraphes indiqués. Il comprend également le «”Bold Tag pour gras un mot spécifique.

  • Le ""Tag ajoute un bouton ayant un associé"sur clic»Redirection des événements vers la fonction nommée«compter()"Cela sera déclenché sur le bouton cliquer.

Code javascript

Ensuite, passez au code JavaScript:

Dans les lignes de code ci-dessus:

  • Définissez une fonction nommée «compter()".
  • Dans sa définition, déclarez la variable "Para”Accéder aux paragraphes inclus via le«document.getElementByTagName ()" méthode.
  • Après cela, un «alerte»La boîte est utilisée pour afficher le nombre total de paragraphes en utilisant le«longueur" propriété.

Sortir

Comme on le voit, la sortie apparaît d'un «alerte"Cela affiche le nombre total du"

Exemple 2: Application de la méthode "getElementsByTagName ()" pour compter "

" Mots clés

Dans cet exemple, la méthode discutée peut être appliquée à même, compter le «

Code HTML

Tout d'abord, regardez le code HTML fourni ci-dessous:

Méthode getElementsByTagName ()


Syntaxe


Fonctionnement


Usage


Importance


Conclusion



Dans les lignes de code ci-dessus:

  • Le "

    " Crée la première sous-position.

  • Après cela, cinq "

    »Les balises sont spécifiées affichant les sous-titres indiqués.

  • Enfin, associez le «ondblclick”Événement avec le""Tag et redirigez vers la fonction"total()"Sur le bouton Double-cliquez.

Code javascript

Ensuite, aperçu du code JavaScript:

Dans le code JavaScript ci-dessus:

  • Premièrement, définissez la fonction "total()" fonction.
  • Dans la définition de la fonction, récupérez la liste de

    Tags dans le document actuel à l'aide du «document.getElementByTagName ()" méthode.

  • Enfin, créez une boîte «alerte» qui apparaît le message fourni à l'aide du «longueur" propriété.

Sortir

La sortie montre le nombre total de i.e., "5"Des tags HTML"

Exemple 3: Application de la méthode «getElementsByTagName ()» pour personnaliser les éléments

Outre la liste des éléments HTML, le «getElementByTagName ()«Peut également être appliqué pour personnaliser également les éléments.

Code HTML

Passez par le code HTML suivant:

Personnaliser le paragraphe à l'aide de GetElementsByTagName ()


C'est le d'abordparagraphe.


C'est le deuxièmeparagraphe.


C'est le troisièmeparagraphe.


C'est le quatrièmeparagraphe.


Dans le code HTML ci-dessus:

  • Rappelez-vous les approches discutées pour inclure un titre et spécifier les paragraphes indiqués dans le «

    " étiqueter.

  • Maintenant, créez un bouton ayant un associé "ondblclick»Redirection des événements vers la fonction nommée«total()". C'est tel que la fonction sera invoquée sur le bouton double clic.

Code javascript

Maintenant, jetez un œil au code JavaScript:

Dans le bloc de code ci-dessus:

  • Tout d'abord, définissez la fonction "total()".
  • Dans sa définition, également, accédez à l'inclusion "

    »Tags utilisant le«document.getElementByTagName ()" méthode.

  • Ensuite, appliquez un «pour”Boucle pour itérer le long des paragraphes inclus avec l'aide du«longueur" propriété.
  • Dans la boucle, appliquez une bordure à tous les paragraphes en fonction de la personnalisation spécifiée via le «style.frontière" propriété.

Sortir

La sortie montre que le style de bordure mentionné est implémenté à tous les «

Conclusion

Le "getElementsByTagName ()»La méthode en JavaScript aide les utilisateurs à invoquer la collection en direct de éléments HTML particuliers basés sur les noms de balises. Il renvoie la liste mise à jour des éléments HTML en cas de modification du document. De plus, il peut également être utilisé pour personnaliser le contenu spécifique des éléments HTML selon les exigences à la fois. Ce guide a démontré l'utilisation complète du «getElementsByTagName ()»Méthode en JavaScript.

C ++
Comment utiliser l'instruction Switch en C++?
L'instruction Switch est une instruction conditionnelle en C ++ qui teste une variable contre plusie...
Julien Dumas
golang
Comment utiliser les chaînes.Remplacer la fonction dans Golang - Exemples
Les cordes.Remplacer () La fonction dans Golang remplace toutes les occurrences d'une sous-chaîne da...
Nathan Blanc
C programmation C
Que signifie '/ =' dans la programmation C?
L'opérateur «/ =» est un opérateur utile en programmation C qui effectue une division et une affecta...
Ines Dubois