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.