El API Query nos puede permitir la ejecución de selectores. Así que en este artículo vamos a ver como acceder a una clase con QuerySelector.
Lo primero será validar si nuestro navegador soporta el API QuerySelector, ya que no todos los navegadores lo soportan.
if (document.querySelector)
document.write ("API Query Selector soportado");
Una página HTML puede tener diferentes elementos a los que les asigne una clase, a diferencia de un ID dónde solo encontraremos uno único dentro de la página.
De esta forma la página sobre la que partamos tendrá la siguiente forma:
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
Como podemos comprobar hay varios elementos LI los cuales tienen asociada una clase «item».
Para acceder a una clase con QuerySelector tenemos que saber que el selector de clases se monta anticipándole un punto al nombre de la clase.
.nombreClase
Ahora pasamos a ejecutar el método .querySelector para obtener acceso al elemento.
var elemento = document.querySelector(".item");
Al ejecutar el método .querySelector sobre la clase lo que obtenemos es un acceso al primer elemento que contenga dicha clase en la página. Es decir, que si ejecutamos el volcado del contenido:
console.log(elemento.innerHTML);
Lo que vamos a obtener es:
Item 1
En el caso de que queramos obtener todos los elementos que contengan la clase «item» deberemos de recurrir a la función .querySelectorAll.
var elementos = document.querySelectorAll(".item");
for (x=0;x