' pour le paragraphe, '
' pour le titre de premier niveau, etc. Cette approche est nécessaire lorsque l'utilisateur doit accéder à un élément HTML par son nom de balise directement au lieu de rechercher plusieurs lignes de code.
Ce guide vous expliquera la procédure complète pour récupérer le nom de la balise d'un élément HTML à l'aide de JavaScript.
Comment récupérer le nom de balise d'un élément HTML à l'aide de JavaScript ?
JavaScript offre la lecture seule ' tagName ” qui affiche le nom de la balise de l'élément HTML correspondant. Il renvoie une valeur de chaîne, c'est-à-dire le nom de la balise de l'élément en MAJUSCULES.
Syntaxe
élément. tagName
Dans la syntaxe ci-dessus, ' tagName ' correspond aux noms de balises de l'élément qui doivent être récupérés.
Passons maintenant à sa mise en œuvre pratique pour vérifier comment il peut être utilisé pour récupérer le nom de la balise de l'élément HTML correspondant.
Exemple : Application de la propriété 'tagName' pour récupérer le nom de balise d'un élément HTML
Dans cet exemple, tous les noms de balises de l'élément spécifiés dans le code HTML peuvent être récupérés via le ' tagName ' propriété.
Code HTML
Examinons le code HTML suivant :
< corps sur clic = 'elemName()' >< h2 > Récupérer le tagName de l'élément HTML en JavaScript < / h2 >
< p > Cliquez sur n'importe quel élément de ce document pour obtenir son nom de balise. < / p >
< bouton > Cliquez dessus < / bouton >
< p identifiant = 'démo' >< / p >
Dans les lignes de code ci-dessus :
- Le '
La balise ' est associée à un ' sur clic « événement redirigeant vers la fonction JavaScript » elemName() ” qui se déclenchera en un clic. - Le ' ” définit le sous-titre.
- Le ' ” crée une déclaration de paragraphe.
- Le '
» ajoute un bouton nommé « Cliquez dessus ». - Enfin, le « La balise ' définit un paragraphe vide ayant un identifiant ' démo ” pour afficher le nom de la balise d'élément HTML lors du déclencheur d'événement “onclick”.
Code Javascript
Passez ensuite au code fourni ci-dessous :
< scénario >fonction nom_élément ( ) {
constante élément = événement. cible ;
document. getElementById ( 'démo' ) . innerHTML = 'Le nom de la balise de l'élément HTML sur lequel vous avez cliqué est : ' + élément. tagName ;
}
scénario >
Dans ce bloc de code :
- Définissez une fonction nommée ' elemName() ”.
- Dans sa définition, déclarez la variable « élément « de type de données » constante ' qui utilise le ' cible ” propriété pour renvoyer le nom de l'élément lorsque son événement associé se déclenche.
- Enfin, appliquez le « getElementById() ” pour accéder au paragraphe ajouté à l'aide de son identifiant.
- Cela se traduira par l'affichage du nom de la balise de l'élément HTML correspondant à l'aide du ' tagName ” lorsque l'événement “onclick” se déclenchera.
- Il est tel qu'en cliquant sur l'un des éléments du code HTML, le nom de la balise correspondante sera récupéré.
Sortir
La sortie affiche le nom de balise d'élément correspondant où l'événement 'onclick' se déclenche en conséquence.
Conclusion
JavaScript fournit le ' tagName ” pour obtenir le nom de la balise d'élément HTML. Il est généralement utilisé avec des gestionnaires d'événements JavaScript comme 'onclick', 'onmouseover', 'ondblclick' etc. Lorsque l'événement associé à l'élément HTML se déclenche, il renvoie son nom de balise en MAJUSCULES par défaut. Ce guide a fourni une brève description de la façon de récupérer le nom de balise d'un élément HTML à l'aide de JavaScript.