How to convert a DOM node list to an array in Javascript?

Two common conversion methods and their compatibility

The two most frequent methods to convert a NodeList into an array are Array.from() and the spread operator (...). However, their behavior varies broadly across browsers:

• Spread operator (...): Mostly supported across modern browsers, but doesn't play well with Internet Explorer.
• Array.from(nodelist): This method screams cross-browser compatibility, making it a frequently preferred option for a more diverse audience base.

The challenge: older browsers

When older browsers like Internet Explorer enter the game, things can get a little tricky:

• A manual for-loop adding NodeList items into an array could be considered an old-school but reliable technique.
• A more functional approach could be [].map.call(nodelist, function(item) { return item; }).

Caution: ECMAScript specifications flag the use of Array.prototype.slice on host objects such as NodeLists, as it invites inconsistent behavior across browsers.

Understanding cross-browser compatibility

There's more to coding than using the latest and most impressive features. Ensuring that your code performs consistently across diverse environments is as significant as the code's functionality itself:

• Using [].slice.call(nodelist) might become problematic due to lack of support in Internet Explorer.
• for...of loops are concise and handy in ES6-compatible environments, albeit inapplicable in older IE versions.
• Implementing polyfills provides NodeList.forEach functionality to browsers lacking native support.
• Understanding your audience and their likely range of browsers will significantly influence your approach and choice of methods.

Bear in mind, a NodeList is not merely an oddly named array—it's a unique beast reflecting real-time DOM changes!

Not always necessary: Modern alternatives & understanding your environment

Contrary to popular belief, converting a NodeList to an array isn't always necessary:

• Modern ECMAScript versions support direct iteration over NodeLists using NodeList.prototype.forEach.
• Simplest solutions that meet all your use cases often lead to the most readable and maintainable code, adhering to the principle of economy of effort.
• Transpiling ES6 code (e.g., with Babel) lets you safely use newer syntax, like the spread operator, and expect it to work seamlessly in all browsers.
• Understanding how your tools work beneath the surface is the key to master them. So experiment in your browser's console, test your solutions, and adapt as necessary.

Your audience's browsers and their limitations shape the most appropriate code strategies—it's your canvas, paint it well!