queryselectorall array javascript ecmascript-6 nodelist htmlcollection

javascript - array - object htmlcollection



¿Son HTMLCollection y NodeList iterables? (3)

En ES6, un iterable es un objeto que permite for... of , y tiene una clave Symbol.iterator.

Las matrices son iterables, al igual que los conjuntos y mapas. La pregunta es: ¿son HTMLCollection y NodeList iterables? ¿Se supone que son?

La documentación de MDN parece sugerir que un NodeList es un iterable.

for...of loops recorrerá los objetos de NodeList correctamente, en los navegadores compatibles for...of (como Firefox 13 y versiones posteriores)

Esto parece corroborar el comportamiento de Firefox.

Probé el siguiente código tanto en Chrome como en Firefox, y me sorprendió descubrir que Firefox parece pensar que son iterables, pero Chrome no. Además, Firefox piensa que los iteradores devueltos por HTMLCollection y NodeList son los mismos.

var col = document.getElementsByClassName(''test''); // Should get HTMLCollection of 2 elems var nod = document.querySelectorAll(''.test''); // Should get NodeList of 2 elems var arr = [].slice.call(col); // Should get Array of 2 elems console.log(col[Symbol.iterator]); // Firefox: iterator function, Chrome: undefined console.log(nod[Symbol.iterator]); // Firefox: iterator function, Chrome: undefined console.log(arr[Symbol.iterator]); // Firefox & Chrome: iterator function console.log(col[Symbol.iterator] === nod[Symbol.iterator]); // Firefox: true console.log(col[Symbol.iterator] === arr[Symbol.iterator]); // Firefox: false

<div class="test">1</div> <div class="test">2</div>

Una cosa realmente extraña y confusa : ejecutar el fragmento de código produce un resultado diferente al copiarlo y ejecutarlo en un archivo / consola real en Firefox (particularmente la última comparación). Cualquier iluminación sobre este extraño comportamiento aquí también sería apreciada.

Como señaló Symbol.iterator soporte nativo de Symbol.iterator para NodeList se agregó a la especificación DOM de WHATWG en 2014.

Desafortunadamente, Chrome 51 es la primera versión de Chrome que lo admite, y su versión Beta acaba de ser lanzada al momento de escribir esta respuesta. Además, no hay soporte en ninguna versión de Internet Explorer o Edge.

Para agregar el soporte de NodeList para NodeList en todos los navegadores a su código, solo use el siguiente polyfill:

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

Desafortunadamente aún no. Pero hasta que lo estén, puedes rellenarlos fácilmente así:

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];