Estamos tan acostumbrados a document.getElementById que todo lo que tiene que ver con búsquedas complejas en el DOM dependemos de librerías de terceros, como JQuery. Si nuestro código HTML está creado de forma coherente, tanto en marcado como en estilos podemos realizar potentes búsquedas con poco esfuerzo 🙂 A partir de HTML 5 es otra de las comodidades de las que podremos disfrutar y además a día de hoy ya está disponible en las últimas versiones de los navegadores más importantes del mercado.

La única diferencia entre el primero y el segundo es que querySelector devuelve el primer elemento que se encuentre en el documento y querySelectorAll devuelve todos aquellos que coincidan con el grupo de selectores.

Selectores

Hace bastante tiempo hablé sobre los selectores desde el punto de vista de JQuery y básicamente podemos ceñirnos a estos mismos cuando tengamos que realizar las queries:

• #id: Utilizaremos la almohadilla seguida del id del elemento que queramos recuperar.

   var grid = document.querySelector("#grid");

• .class: El punto seguido del nombre de la clase nos proporcionará el elemento/s que tengan asignada la clase de CSS especificada.

  var onlineElems = document.querySelectorAll(".online");

• tag: Anteriormente podíamos estar haciendo uso de document.getElementsByTagName, que equivaldría a indicar qué tipo de elementos queremos retornar indicando el nombre de su etiqueta.

   var divs = document.querySelectorAll("div");

Realmente, no tiene más misterio que hacer uso de los mismos selectores que utilizamos cuando trabajamos con hojas de estilo. De la misma forma podemos agruparlas y crear selectores más complejos.

 var actions = document.querySelectorAll("header h1 .icon");
var draggables = document.querySelectorAll('ul li[draggable=true]');

Iterar sobre document.querySelectorAll

Cuando trabajamos con el segundo mecanismo, el que devuelve todos los elementos, este retorna el tipo NodeList, el cual no permite iterar directamente a través de forEach 🙁 Pero existe otra alternativa:

[].forEach.call(document.querySelectorAll('ul li[draggable=true]'), function (elem) {
       //do things
});

Lo que estamos haciendo en este caso es utilizar el forEach implementado para el objeto Array a través de call, lo cual permite ejecutar una función como si fuera de otro objeto 😀
Podemos comprobar que esta es la forma que mejor rendimiento tiene frente a otras a través de este enlace.

Espero que haya sido de utilidad.

¡Saludos!