Encuentre un elemento en DOM basado en un valor de atributo

En varias situaciones, es posible que deba encontrar un elemento en el DOM basado en un valor de atributo para aplicar cualquier estilo o cualquier otra funcionalidad. Por ejemplo, mientras trabaja con páginas web grandes o complejas o seleccionan un elemento específico basado en sus atributos para el estilo o manipulación. Ayuda a trabajar de manera más eficiente y efectiva con páginas web.

Este tutorial describirá el procedimiento para encontrar el elemento DOM basado en cualquier valor de atributo.

Cómo encontrar/recuperar un elemento en DOM basado en un valor de atributo?

Para encontrar el elemento en DOM basado en un valor de atributo, utilice el "QuerySelector ()" método. Da el primer elemento que se encuentra en el documento que coincide con el valor del selector CSS dado.

Nota: Para obtener todos los elementos que coincidan con el valor del selector especificado, use el "QuerySelectorAll ()" método.

Sintaxis

Para usar el método "QuerySelector ()", utilice la siguiente sintaxis:

documento.QuerySelector (selector);

Aquí, el selector será una identificación o clase como "#identificación",".clase":

También puede usar la sintaxis dada para encontrar el elemento basado en el valor del atributo:

documento.QuerySelector ("[selector = 'value']");

En la sintaxis anterior, "selector" será "identificación" o "clase", o el "valor" será "nombre" o "nombre de la clase".

Ejemplo

En un archivo HTML, cree un elemento div que contiene un encabezado usando el elemento H4, un texto sin formato usando la etiqueta y un DIV para un mensaje con ID asignado "mensaje":

Encuentre un elemento en DOM basado en un valor de atributo

= "Bienvenido"> Bienvenido a Linuxhint

Hola, chicos! Bienvenido en los tutoriales de Linuxhint JavaScript

La página se verá como el siguiente:

Ahora, obtendremos el elemento donde la identificación "mensaje"Se asigna utilizando el"QuerySelector ()" método:

elemento var = documento.QuerySelector ('#Mensaje')

Finalmente, imprima el elemento en la consola:

consola.log (elemento);

En la salida, el "div"El elemento se muestra con su ID asignada"mensaje", Que indica que el elemento requerido se ha recuperado con éxito:

También puede obtener el elemento usando la sintaxis dada. Aquí, obtendremos el elemento cuya identificación es "machista":

elemento var = documento.QuerySelector ("[id = 'msg']");

Producción

Ahora, actualice el color de él usando el "estilo" propiedad:

elemento.estilo.color = "azul";

Como puede ver, el texto estaba en "verde"Color, y ahora se ha actualizado a"azul":

Se trata de encontrar un elemento en un DOM basado en un valor de atributo.

Conclusión

Para encontrar un elemento en DOM basado en un valor de atributo, utilice el "QuerySelector ()"Método que proporciona el primer elemento en el documento que coincide con el valor del selector CSS especificado. Además, para obtener todos los elementos que coincidan con el valor selector especificado, use el "QuerySelectorAll ()" método. Este tutorial describió el procedimiento para encontrar el elemento DOM basado en cualquier valor de atributo.