Acceder a una clase con QuerySelector

03/Sep/2014 JavaScript , Deja un comentario

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.

  1. if (document.querySelector)
  2. 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:

  1. <li class="item">Item 1</li>
  2. <li class="item">Item 2</li>
  3. <li class="item">Item 3</li>
  4. <li class="item">Item 4</li>
  5. <li class="item">Item 5</li>
  6. </ul>

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.

  1. 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:

  1. 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.

  1. var elementos = document.querySelectorAll(".item");
  2. for (x=0;x<elementos.length;x++) {
  3. console.log(elementos[x].innerHTML);
  4. }

Vídeos sobre Javascript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*