ArrayfromNodeList

Array.from(NodeList) is a common JavaScript pattern for turning a NodeList, the array‑like collection returned by many DOM methods, into a true Array. A NodeList has a length and numeric indices but does not expose the full set of Array methods such as map, filter, or reduce. Sources include document.querySelectorAll, getElementsByTagName, and other DOM methods that return node lists or collections.

Usage and syntax: Array.from(arrayLike, mapFn?, thisArg?). The first argument is any iterable or array-like object, such as a NodeList. The optional mapFn is applied to each element as it is copied into the new array, and thisArg defines the this value inside mapFn.

Examples:

- const divs = Array.from(document.querySelectorAll('div'));

- const ids = Array.from(document.querySelectorAll('.item'), el => el.id);

Notes: NodeLists can be static or live depending on the source. For instance, querySelectorAll returns a static NodeList, while some other collections may reflect DOM changes as they occur. After conversion, you can freely use Array methods like map, filter, or reduce on the resulting array.

Alternative methods exist, such as Array.prototype.slice.call(nodeList) or the spread syntax [...nodeList], but Array.from provides a clearer and more flexible approach, especially with an optional mapping function.

Compatibility: Array.from is part of ES2015 (ES6) and is supported in all modern environments. Older browsers may require a polyfill for Array.from to work reliably.