06-04-2013

Truco (Javascript): Seleccionando elementos con querySelector

Una de las novedades recientes de Javascript es la inclusión de un nuevo método para seleccionar elementos que ofrece mucha más funcionalidad que los tradicionales getElementById, getElementsByTagName, etc. Se trata de querySelector. La sintaxis es sencilla, seleccionamos elementos igual que en CSS, usando . para denotar clases y # para identificadores.

var con_id = document.querySelector("#elemento_con_id");
var elegante = document.querySelector(".elemento_con_clase");
var familia = document.querySelector(".padre div#descendiente > a.hijo");

querySelector seleccionará la primera ocurrencia del selector introducido. Si, por el contrario, queremos seleccionar todos los elementos que coincidan, podemos usar querySelectorAll, que devuelve un array de nodos HTML:

var todos_con_clase = document.querySelectorAll('.una_clase');
var activadas = document.querySelectorAll("input[type='checkbox']:checked");