How to Convert a Dom Node List to an Array in JavaScript

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

NodeLists are host objects, using the Array.prototype.slice method on host objects is not guaranteed to work, the ECMAScript Specification states:

Whether the slice function can be applied successfully to a host object is implementation-dependent.

I would recommend you to make a simple function to iterate over the NodeList and add each
existing element to an array:

function toArray(obj) {
  var array = [];
  // iterate backwards ensuring that length is an UInt32
  for (var i = obj.length >>> 0; i--;) { 
    array[i] = obj[i];
  }
  return array;
}

UPDATE:

As other answers suggest, you can now can use in modern environments the spread syntax or the Array.from method:

const array = [ ...nodeList ] // or Array.from(nodeList)

But thinking about it, I guess the most common use case to convert a NodeList to an Array is to iterate over it, and now the NodeList.prototype object has the forEach method natively, so if you are on a modern environment you can use it directly, or have a pollyfill.

Fastest way to convert JavaScript NodeList to Array?

2021 update: nodeList.forEach() is now standard and supported in all current browsers (around 95% on both desktop & mobile).

So you can simply do:

document.querySelectorAll('img').forEach(highlight);

Other cases

If you for some reason want to convert it to an array, not just iterate over it - which is a completely relevant use-case - you can use [...destructuring] or Array.from since ES6

let array1 = [...mySetOfElements];
// or
let array2 = Array.from(mySetOfElements);

This also works for other array-like structures that aren't NodeLists

• HTMLCollection returned by e.g. document.getElementsByTagName
• objects with a length property and indexed elements
• iterable objects (objects such as Map and Set)

Outdated 2010 Answer

The second one tends to be faster in some browsers, but the main point is that you have to use it because the first one is just not cross-browser. Even though The Times They Are a-Changin'

@kangax (IE 9 preview)

Array.prototype.slice can now convert
certain host objects (e.g. NodeList’s)
to arrays — something that majority of
modern browsers have been able to do
for quite a while.

Example:

Array.prototype.slice.call(document.childNodes);

In JavaScript, what is the best way to convert a NodeList to an array?

With ES6 you can simply do:

const spanList = [...document.querySelectorAll("span")];

Node to Array in DOM JS, how it works?

You need to transform the node in an actual Array object. You can use Array.from to do that:

const nodes = document.querySelectorAll('div')const nodesArray = Array.from(nodes)nodesArray.forEach(console.log)

var list = document.getElementsByTagName("ul");
for (var i = 0; i < list.length; i++) {
    var items = list[i].getElementsByTagName("li");
    for (var j = 0; j < items.length; j++) {
        console.log(items[j]);
    }
}

var items = document.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
    console.log(items[i]);
}

<ul id="buglist">
    <li>Horse Flies</li>
    <li>Bed bugs</li>
    <li>Mosquito</li>
    <li>Ants</li>
    <li>Mites</li>
    <li>Cricket</li>
    <li>Woolly Bear Caterpillar</li>
    <li>Fleas</li>
    <li>Worms</li>
    <li>Leeches</li>
</ul>

var items = document.querySelectorAll("#buglist li");
for (var j = 0; j < items.length; j++) {
    console.log(items[j]);
}

var list = Array.prototype.slice.call(document.querySelectorAll("#buglist li"), 0);
list.forEach(function(item) {
    console.log(item);
});