Come recuperare il nome del tag di un elemento HTML utilizzando JavaScript

Come Recuperare Il Nome Del Tag Di Un Elemento Html Utilizzando Javascript



Gli elementi HTML sono i componenti essenziali di una pagina Web che ne definisce la struttura e il contenuto con l'aiuto del nome del tag. Il nome del tag indica al browser come interpretare il contenuto come '

' per il paragrafo, '

' per l'intestazione di primo livello, ecc. Questo approccio è necessario quando l'utente deve accedere a un elemento HTML tramite il suo nome di tag direttamente invece di cercare più righe di codice.

Questa guida spiegherà la procedura completa per recuperare il nome del tag di un elemento HTML utilizzando JavaScript.

Come recuperare il nome del tag di un elemento HTML utilizzando JavaScript?

JavaScript offre la sola lettura ' tagNome ” che visualizza il nome del tag dell'elemento HTML corrispondente. Restituisce un valore stringa, ad esempio il nome del tag dell'elemento in MAIUSCOLO.







Sintassi



elemento. tagNome

Nella sintassi precedente, “ tagNome ” corrisponde ai nomi dei tag dell'elemento che devono essere recuperati.



Passiamo ora alla sua implementazione pratica per verificare come può essere utilizzato per recuperare il nome del tag dell'elemento HTML corrispondente.





Esempio: applicazione della proprietà 'tagName' per recuperare il nome del tag di un elemento HTML

In questo esempio, tutti i nomi dei tag dell'elemento specificati nel codice HTML possono essere recuperati tramite il ' tagNome ' proprietà.



Codice HTML

Diamo un'occhiata al seguente codice HTML:

< corpo al clic = 'elemNome()' >
< h2 > Recupera tagName dell'elemento HTML in JavaScript < / h2 >
< P > Fare clic su qualsiasi elemento in questo documento per ottenere il nome del tag. < / P >
< pulsante > Cliccalo < / pulsante >
< P id = 'demo' >< / P >

Nelle righe di codice precedenti:

  • IL ' Il tag 'è associato a un' al clic 'reindirizzamento dell'evento alla funzione JavaScript' nomeelemento() ” che verrà attivato con un clic.
  • IL '

    Il tag ” definisce il sottotitolo.

  • IL '

    Il tag ” crea un'istruzione di paragrafo.

  • IL ' ” aggiunge un pulsante denominato “Click It”.
  • Infine il “

    Il tag ' definisce un paragrafo vuoto con un id ' dimostrazione ” per visualizzare il nome del tag dell'elemento HTML al trigger dell'evento “onclick”.

codice javascript

Quindi passa al codice fornito di seguito:

< copione >
funzione elemNome ( ) {
cost elemento = evento. bersaglio ;
documento. getElementById ( 'demo' ) . innerHTML = 'Il nome del tag dell'elemento HTML su cui è stato fatto clic è:  ' + elemento. tagNome ;
}
copione >

In questo blocco di codice:

  • Definire una funzione denominata ' nomeelemento() ”.
  • Nella sua definizione dichiarare la variabile “ elemento ” di tipo dati “ cost ” che utilizza il “ bersaglio ” per restituire il nome dell'elemento quando si attiva l'evento associato.
  • Infine, applica il ' getElementById() ” metodo per accedere al paragrafo aggiunto usando il suo id.
  • Risulterà nella visualizzazione del nome del tag dell'elemento HTML corrispondente utilizzando il ' tagNome ” quando verrà attivato l'evento “onclick”.
  • È tale che facendo clic su uno qualsiasi degli elementi nel codice HTML, verrà recuperato il nome del tag corrispondente.

Produzione

L'output mostra il nome del tag dell'elemento corrispondente in cui l'evento 'onclick' si attiva di conseguenza.

Conclusione

JavaScript fornisce il built-in ' tagNome ” per ottenere il nome del tag dell'elemento HTML. Viene generalmente utilizzato con gestori di eventi JavaScript come 'onclick', 'onmouseover', 'ondblclick' ecc. Quando l'evento associato dell'elemento HTML si attiva, restituisce il nome del tag in MAIUSCOLO per impostazione predefinita. Questa guida ha fornito una breve descrizione di come recuperare il nome del tag di un elemento HTML utilizzando JavaScript.