Javascript, Selección de elementos sin jQuery

1448
javascript

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:

[code lang=”html”]
<ul>
<li class=”simpson”>Lisa</li>
<li class=”simpson”>Bart</li>
<li class=”simpson”>Homero</li>
</ul>
[/code]

[code lang=”js”]
//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”);
for (var i = 0; i < segundo.length; i++) {
console.log(segundo[i].innerHTML);
}
[/code]