Header Ads Widget

Ticker

6/recent/ticker-posts

querySelector, querySelectorAll y forEach por ejemplo

 En este ejemplo, aprenderemos rápidamente a usar API modernas como el querySelector()método DOM y el querySelectorAll()método y cómo iterar sobre un objeto NodeList usando forEach()También veremos algunas técnicas utilizadas en los navegadores que no admiten la iteración sobre un NodeList forEach()y cómo convertir un NodeList en un Array utilizando el Array.from()método.

querySelectorquerySelectorAlllas API DOM están disponibles en los navegadores web modernos. Se utilizan para consultar elementos DOM que coinciden con un selector de CSS. Puede seleccionar elementos por clase, identificadores o nombres o cualquier selector CSS complejo .

Tomemos este sencillo ejemplo de HTML:

<!DOCTYPE html>
<html>
<body>
 <header>
 <h1>
 querySelector & querySelectorAll Example
 </h1>
 </header>
 <div class="container">
 <div class="row">
 <div class="col">.COL 1</div>
 <div class="col">.COL 2</div>
 <div class="col">.COL 3</div>
 <div class="col">.COL 4</div>
 <div class="col">.COL 5</div>
 </div>
 <div class="row">
 <div id="exampleDiv">Example DIV</div>
 </div>
 </div>
 <footer>Copyright 2018</footer>
</body>
</html>

Ahora, antes del cierre, </body>agregue una <script>etiqueta con el siguiente JavaScript para consultar <div>elementos con .colclase:

const cols = document.querySelectorAll("div.col");

La document.querySelectorAll("div.col")instrucción devuelve una NodeList de los 5 <div class="col">elementos de la página.

Esta es una captura de pantalla del resultado en Chrome DevTools:

querySelectorAll Ejemplo

Una NodeList es una lista (colección) de nodos que pueden ser devueltos por API como Node.childNodesy el document.querySelectorAll()método.

También puede utilizar document.querySelector()para consultar un solo elemento DOM:

const exampleDiv = document.querySelector("#exampleDiv");

Esto devolverá el <div id="exampleDiv">Example DIV</div>elemento:

ejemplo de querySelector

Bucle sobre querySelectorAll NodeList usando forEach

En el ejemplo anterior, hemos visto que el querySelectorAll()método devuelve una NodeList, no una matriz típica.

Puede usar JavaScript ' forEachpara recorrer fácilmente los elementos de una matriz típica, pero ¿qué tal una NodeList?

Puede usar forEachcon una NodeList en navegadores modernos como Chrome y Firefox, pero no es compatible con todos los navegadores (Safari, IE y Edge)

cols.forEach(e => { console.log(e); })

cols es una NodeList.

Esta es una captura de pantalla del resultado en la consola de Chrome DevTools:

NodeList para cada

Ahora, ¿cómo asegurarnos de que nuestro código funcione en todos los navegadores? Simplemente evitando recorrer directamente el valor de retorno del querySelectorAll()método.

const cols = document.querySelectorAll('.col');

[].forEach.call(cols, (e)=>{
 console.log(e);
});

Esta es una captura de pantalla del resultado en la consola de Chrome DevTools:

NodeList para cada

Otra alternativa es utilizar el Array.from()método para convertir el objeto NodeList en una matriz de JavaScript, pero solo está disponible en los navegadores modernos.

Array.from(cols);

Este es el resultado:

Array.from & NodeList

El Array.from()método le permite crear una nueva instancia de Array a partir de un objeto similar a una matriz (como argumentos y NodeList) o iterable.

Publicar un comentario

0 Comentarios