Cómo obtener elemento por atributo en JavaScript

Mientras desarrollan sitios web, hay algunas situaciones en las que los programadores/desarrolladores deben obtener los elementos en JavaScript utilizando sus atributos asignados como "identificación","clase", etcétera. Para hacer esto, use el JavaScript "QuerySelector ()" método.

Este tutorial explicará el proceso para obtener el elemento HTML por atributo usando JavaScript.

Cómo obtener elemento por atributo en JavaScript?

Para obtener un elemento por atributo, el "QuerySelector ()Se utiliza el método ". Devuelve el primer elemento del documento que coincide con el atributo particular. Este método selecciona una etiqueta en particular con un valor de atributo específico. Los parámetros que deben pasar son los "Tagid","clase", etcétera.

Sintaxis
Use la sintaxis mencionada a continuación para obtener el elemento por atributo:

documento.QuerySelector ("[MyAttribute = Value]");

En la sintaxis anterior, pase el atributo con su valor asignado como parámetro.

Ejemplo
En el archivo HTML, primero, cree un "div"Elemento usando la etiqueta y asigne una ID"dividirse". Crea un botón dentro del elemento div y adjunta un "al hacer clic"Evento que activará el"GetElement ()"Método para obtener el elemento:

Haga clic para obtener elemento


Hacer clic

Para diseñar el DIV, usaremos las siguientes líneas de código:

#Divid
relleno: 10px;
Altura: 100px;
Ancho: 200px;
margen: auto;
Color de fondo: rosa;

La salida correspondiente será la siguiente:

En el archivo JavaScript, defina una función "GetElement ()"Eso se activará mientras se hace clic en el botón. Llama a "QuerySelector ()"Método y pasar el atributo"identificación"Y su valor"dividirse"Como argumento y almacene el elemento resultante en una variable"elemento":

función getElement ()
elemento var = documento.QuerySelector ('[id = "dividido"]');
alerta (elemento);

La salida dada muestra que el atributo "dividirse"Pertenece a un elemento"div":

Si desea ver todos los elementos dentro del elemento específico, en lugar de llamar al método alert (), use el "consola.registro()Método que mostrará el elemento que incluye sus elementos infantiles.

función getElement ()
elemento var = documento.QuerySelector ('[id = "dividido"]');
consola.log (elemento);

Producción

El GIF anterior muestra el HTML "div"Elemento que tiene un atributo con el valor"dividirse", Con sus elementos infantiles en la consola haciendo clic en el botón.

Conclusión

Para obtener un elemento por atributo, use el JavaScript predefinido "QuerySelector ()" método. Se usa para seleccionar una etiqueta en particular con un valor de atributo específico. Este tutorial explica el proceso para obtener el elemento HTML por atributo usando JavaScript.