Archivos mensuales: Febrero 2012

querySelector / querySelectorAll

Estamos tan acostumbrados a los frameworks tipo jQuery que se nos olvida que también existe una forma dentro de javascript para realizar una búsqueda de elementos dentro del DOM mediante un selector. La manera de hacerlo es mediante los métodos querySelector y querySelectorAll.

La forma de usarlos es igual que con jQuery:

document.querySelector('#mi_id')
document.querySelector('.mi_classe')

La diferencia entre querySelector y querySelectorAll es que el primero nos devuelve el primer elemento que cumple el selector y el segundo nos devuelve una lista de nodos.

¿Para que nos puede ser útil esto? Por ejemplo, para realizar ciertos selectors en un proyecto sin tener que cargar jQuery o cuando no nos es posible cargar jQuery porque lo que estamos modificando es de una tercera persona.

Otro uso un poco más rebuscado sería el que le he dado yo hoy: Estaba trabajando con una BBDD desde phpMyAdmin y quería seleccionar todas las tablas que empezarán por ps_ y claro estamos hablando de más de 100 tablas y hacerlo a mano es un poco rollo.

Así que para facilitar mi trabajo, he abierto la consola del Chrome y que tecleado el siguiente código:

for (var i=0, lista = window.frames[1].document.querySelectorAll('input[value*=ps_]'), limite = lista.length; i < limite; i += 1) { lista[i].setAttribute('checked', 'checked');}

Con esto consigo que se me seleccionen todos los checkbox y puedo borrarlos todos de una.