Artículos
Javascript

Acceder a una clase con QuerySelector

03/Sep/2014

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

Código Fuente

Descárgate el código fuente de Acceder a una clase con QuerySelector
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Javascript

Disfruta también de nuestros artículos sobre Javascript en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Javascript

¿Te atreves a probar tus habilidades y conocimiento en Javascript con nuestro test?

Test Javascript
Suscribir
Notificar de
guest
0 Comentarios
Opiniones integradas
Ver todos los comentarios