Cómo obtener el nombre de la etiqueta de un elemento HTML usando JavaScript

Como Obtener El Nombre De La Etiqueta De Un Elemento Html Usando Javascript



Los elementos HTML son los componentes esenciales de una página web que define su estructura y contenido con la ayuda de su nombre de etiqueta. El nombre de la etiqueta le indica al navegador cómo interpretar el contenido como '

' para el párrafo, '

' para el encabezado de primer nivel, etc. Este enfoque es necesario cuando el usuario necesita acceder a un elemento HTML por su nombre de etiqueta. directamente en lugar de buscar varias líneas de código.

Esta guía explicará el procedimiento completo para obtener el nombre de la etiqueta de un elemento HTML usando JavaScript.

¿Cómo obtener el nombre de la etiqueta de un elemento HTML usando JavaScript?

JavaScript ofrece la función de solo lectura “ etiquetaNombre ” propiedad que muestra el nombre de la etiqueta del elemento HTML correspondiente. Devuelve un valor de cadena, es decir, el nombre de la etiqueta del elemento en MAYÚSCULAS.  







Sintaxis



elemento. etiquetaNombre

En la sintaxis anterior, “ etiquetaNombre ” corresponde a los nombres de las etiquetas de los elementos que deben recuperarse.



Ahora, pasemos a su implementación práctica para verificar cómo se puede usar para obtener el nombre de la etiqueta del elemento HTML correspondiente.





Ejemplo: aplicar la propiedad 'tagName' para obtener el nombre de la etiqueta de un elemento HTML

En este ejemplo, todos los nombres de etiqueta del elemento especificados en el código HTML se pueden obtener a través de la opción ' etiquetaNombre ' propiedad.



código HTML

Echemos un vistazo al siguiente código HTML:

< cuerpo al hacer clic = 'nombreElemento()' >
< h2 > Obtener tagName del elemento HTML en JavaScript < / h2 >
< pag > Haga clic en cualquier elemento de este documento para obtener su nombre de etiqueta. < / pag >
< botón > Pinchalo < / botón >
< pag identificación = 'manifestación' >< / pag >

En las líneas de código anteriores:

  • El ' La etiqueta ” está asociada con un “ al hacer clic 'evento que redirige a la función de JavaScript' elemName() ” que se activará con un clic.
  • El '

    La etiqueta ” define el subtítulo.

  • El '

    La etiqueta ” crea una declaración de párrafo.

  • El ' La etiqueta ” agrega un botón llamado “Click It”.
  • Por último, el “

    ” etiqueta define un párrafo vacío que tiene una identificación “ manifestación ” para mostrar el nombre de la etiqueta del elemento HTML en el activador del evento “onclick”.

Código JavaScript

A continuación, pase al código proporcionado a continuación:

< guion >
función elemName ( ) {
constante elemento = evento. objetivo ;
documento. getElementById ( 'manifestación' ) . HTML interno = 'El nombre de la etiqueta del elemento HTML en el que se hizo clic es:  ' + elemento. etiquetaNombre ;
}
guion >

En este bloque de código:

  • Defina una función llamada “ elemName() ”.
  • En su definición, declarar la variable “ elemento ” de tipo de datos “ constante ” que utiliza el “ objetivo ” para devolver el nombre del elemento cuando se activa su evento asociado.
  • Por último, aplique el “ getElementById() ” para acceder al párrafo agregado usando su id.
  • Dará como resultado que se muestre el nombre de la etiqueta del elemento HTML correspondiente usando el ' etiquetaNombre ” propiedad cuando se activará el evento “onclick”.
  • Es tal que al hacer clic en cualquiera de los elementos del código HTML, se recuperará el nombre de la etiqueta correspondiente.

Producción

El resultado muestra el nombre de la etiqueta del elemento correspondiente donde se activa el evento 'onclick' en consecuencia.

Conclusión

JavaScript proporciona el ' etiquetaNombre ” propiedad para obtener el nombre de la etiqueta del elemento HTML. Generalmente se usa con controladores de eventos de JavaScript como 'onclick', 'onmouseover', 'ondblclick', etc. Cuando se activa el evento asociado del elemento HTML, devuelve su nombre de etiqueta en MAYÚSCULAS de forma predeterminada. Esta guía proporciona una breve descripción de cómo obtener el nombre de la etiqueta de un elemento HTML utilizando JavaScript.