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.
if (document.querySelector)
document.write ("API Query Selector soportado");
else
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.
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»…
Esto es un mensaje
Podemos ejecutar el siguiente código:
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
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.
