Once upon a time, we could only select elements by id, class and tag name, and jQuery was a life-saver with its smart css-like selectors. Browsers have caught on since, and introduced two important APIs – querySelector and querySelectorAll:
Alguna vez, sólo se pudieron seleccionar elementos por id, clase y nombre de la etiqueta, y jQuery era un salvavidas con sus inteligentes selectores CSS. Los navegadores al enterarse de esto han introducido dos importantes APIs – querySelector y querySelectorAll:
<ul> <li class="simpson">Lisa</li> <li class="simpson">Bart</li> <li class="simpson">Homero</li> </ul>
//Podemos utilizar document.querySelector para obtener el primer elemento que cumpla determinados criterios.
//Es el único argumento es una cadena que contiene una o más selectores CSS.
var primero = document.querySelector(".simpson");
console.log("Este simpson es inteligente - " + primero.textContent);
//También podemos obtener todos los elementos de un determinado tipo o clase utilizando document.querySelectorAll.
//Esto devuelve un NodeList de todos los elementos que se ajustan a nuestros criterios.
var segundo = document.querySelectorAll(".simpson");
<span style="line-height: 1.5em;">for (var i = 0; i < segundo.length; i++) {</span>
console.log(segundo[i].innerHTML);
}
