Selectores mediante CSS con Javascript

Muchas veces usamos jQuery simplemente por su facilidad a la hora de seleccionar elementos de nuestro DOM, y poder trabajar con ellos fácilmente. No son muy agradables, al menos no a nivel popular, los famosos getElementById y getElementsByTagName.

Sin embargo, hay formas más sencillas de utilizar selectores en Javascript puro. Y son métodos mayormente desconocidos, a pesar de que lo soportan casi todos los browsers populares (todos y IE+7).

querySelector

querySelector permitirá elegir el primer elemento de nuestro DOM que matchee con lo que le pasamos. Funciona igual que los selectores de jQuery, por lo que si ya estás acostumbrado te resultará fácil utilizarlo.

var articulo = document.querySelector('article');
var error = document.querySelector('.error');

La primer variable articulo será el elemento article, mientras que error será el que contenga la clase error.

querySelectorAll

querySelectorAll funciona exactamente igual, pero guarda en un array todos los elementos que coincidan, no solamente el primero. El siguiente ejemplo se ve que podemos guardar en el array pdf todos los links a un archivo pdf.

var pdfs = document.querySelectorAll('a[href$=".pdf"]');

Vía FernetJs