NodeList object in javascript

javascript nodelist
ppoliani picture ppoliani · Mar 31, 2011 · Viewed 60.6k times · Source

Can anyone tell me what kind of object the NodeList is. I read that it is an array-like object and that it can be accessed via bracket notation, for example var a = someNode.childNode[0];. How is this possible since via bracket notation we can only access to the properties of an object, and as i know we can not have

Answer

brielov picture brielov · Aug 8, 2013

A NodeList is collection of DOM elements. It's like an array (but it isn't). To work with it, you must turn it into a regular JavaScript array. The following snippet can get the job done for you.

const nodeList = document.getElementsByClassName('.yourClass'),
      nodeArray = [].slice.call(nodeList);

UPDATE:

// newer syntax
const nodeList = Array.from(document.querySelectorAll('[selector]'))

// or
const nodeList = [...document.querySelectorAll('[selector]')]

Related questions

Fastest way to convert JavaScript NodeList to Array?

Previously answered questions here said that this was the fastest way: //nl is a NodeList var arr = Array.prototype.slice.call(nl); In benchmarking on my browser I have found that it is more than 3 times slower than this: var …

Read More
What does [].forEach.call() do in JavaScript?

I was looking at some snippets of code, and I found multiple elements calling a function over a node list with a forEach applied to an empty array. For example I have something like: [].forEach.call( document.querySelectorAll('a'), function(…

Read More
Filter or map nodelists in ES6

What is the most efficient way to filter or map a nodelist in ES6? Based on my readings, I would use one of the following options: [...nodelist].filter or Array.from(nodelist).filter Which one would you recommend? And are …

Read More