API QuerySelector

31/Ago/2014 JavaScript , 1 Comentario

El API QuerySelector es un API Javascript que nos permite ejecutar selectores para poder acceder a elementos del DOM de de una página web. Algo que frameworks como jQuery ya tenían implementado hace tiempo, pero que ahora tenemos de forma estándar en Javascript.

De esta forma el API QuerySelector complementa a las funciones ya existentes .getElementById(), .getElementByName() y .getElementsByTagName().

Aunque el soporte del API QuerySelector está bastante extendido lo primero que vamos a realizar es comprobar si el navegador en el que ejecutamos el código tiene el soporte del API QuerySelector. Para ello validamos si existe document.querySelector.

  1. if (document.querySelector)
  2. document.write ("API Query Selector soportado");
  3. else
  4. document.write ("API Query Selector NO soportado");

Para poder ejecutar el API QuerySelector es muy sencillo, para ello basta con ejecutar la función .querySelector indicándole el selector como parámetro que queramos ejecutar.

  1. var elemento = document.querySelector("selector");

Los selectores pueden indicar múltiples cosas, ya sean identificadores, clases, etiquetas, jerarquías de etiquetas,...

Por ejemplo si tenemos un ID dentro de nuestra página web que se llame "mensaje"...

  1. <div id="mensaje">Esto es un mensaje</div>

Podemos ejecutar el siguiente código:

  1. var mensaje = document.querySelector("#mensaje");

La variable mensaje contendrá un objeto DOM, en este caso un objeto HTMLDIVElement. De esta forma podemos acceder a todas sus propiedades, por ejemplo a su contenido con .innerHTML

  1. console.log("El contenido del ID mensaje es '" + mensaje.innerHTML + "'");

Ahora ya solo te queda ir jugando con los diferentes selectores del API QuerySelector para ir viendo toda su potencia.

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

Un comentario en “API QuerySelector”

Víctor Cuervo

Ronald

Interesante articulo para saber un poco mas de Javascript

¿Algo que nos quieras comentar?

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

*

*