Obtenga todos los elementos que contienen una clase con QuerySelector
Hay muchas situaciones en las que los desarrolladores necesitan seleccionar un grupo de elementos que compartan propiedades similares. Por ejemplo, aplicando algunas funcionalidades colectivas en los elementos especificados, los desarrolladores pueden necesitar verificar y obtener los elementos que contienen el mismo nombre de clase.
Más específicamente, la recuperación de elementos por nombre de clase se realiza utilizando los métodos JavaScript, como "getElementsByClassName () "," QuerySelector () "y" QuerySelectorAll ()" métodos. El "QuerySelector ()El método "solo da la primera coincidencia del selector dado mientras el "GetElementsByClassName ()" y el "QuerySelectorAll" Los métodos devuelven una variedad de elementos que coincidan con el nombre de clase particular.
Este tutorial describirá la forma de recuperar todos los elementos que contienen la misma clase usando Queryselector.
Cómo obtener todos los elementos que contienen una clase con QuerySelector?
El selector de consultas solo da la primera instancia que coincide con el nombre de la clase. Para obtener todos los elementos, utilice el "QuerySelectorAll ()" método. Devuelve un grupo de todos los elementos que coinciden con el selector especificado, como un nombre de clase en particular.
Ejemplo 1: Obtenga todos los elementos que contengan una clase con el método QuerySelector ()
Crear botones y asignar un "btn"Clase para diseñarlos:
Ahora, obtenga todos los elementos de botón utilizando un nombre de clase especificado con la ayuda del "QuerySelector ()" método:
consola.registro (documento.QuerySelector ('.btn '));La salida indica que solo se ha recuperado el primer elemento de botón utilizando el método QuerySelector ():
Veamos qué sucederá cuando intentemos diseñar los botones usando el método QuerySelector ().
Primero, almacene las referencias de todos los botones en la variable "botón":
botón var = documento.QuerySelector ('.btn ');Ahora, aplique el color de fondo para todos los botones utilizando el "estilo" propiedad:
botón.estilo.backgroundColor = "Gray";Como puede ver en la salida, el color se aplica solo en el primer botón:
Ejemplo 2: Obtenga todos los elementos que contienen una clase con el método QuerySelectorAll ()
El "QuerySelectorAll ()El método "ofrece la lista de elementos coincide con el selector particular:
consola.registro (documento.QuerySelectorall ('.btn '));Producción
Obtenga todos los botones usando el "QuerySelectorAll ()Método al pasar el nombre de clase para diseñarlos:
botón var = documento.QuerySelectorall ('.btn ');Para una lista de elementos de estilo, use el enfoque For Loop para iterar cada nodo y establezca el color de fondo "gris":
para (deja i = 0; yo < button.length; i++)botón [i].estilo.backgroundColor = "Gray";
Se puede ver que todos los botones han sido diseñados con éxito:
Hemos compilado toda la información relevante relacionada con la obtención de elementos que contienen la misma clase con QuerySelector.
Conclusión
Para obtener todos los elementos de la misma clase, utilice el "QuerySelectorAll ()"Método en lugar de"QuerySelector ()". Porque solo da la primera instancia o elemento que contiene el nombre de clase particular. Este tutorial describió la forma de recuperar todos los elementos HTML que tienen el mismo nombre de clase.