API QuerySelector

31/Ago/2014 JavaScript , 1 Comentario
Ejemplos Programación en Javascript

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.

Vídeos sobre Javascript


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

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.