I recently needed to extract the value of several nodes from an HTML document. I got the nodes using querySelectorAll, which returns a list of the nodes that meet the criteria. I had used arr.map before, so I tried to do it like this (which did not work):

var elems = document.querySelectorAll('select option:checked');
values = elems.map(function(obj) {return obj.value});

When I read the documentation in MDN, I saw that I had to use something like this instead:

var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj) {
  return obj.value;
});

My question is, if what I get from querySelectorAll is an array, why can't I use the first expression, like I would for any other array?

I recently needed to extract the value of several nodes from an HTML document. I got the nodes using querySelectorAll, which returns a list of the nodes that meet the criteria. I had used arr.map before, so I tried to do it like this (which did not work):

var elems = document.querySelectorAll('select option:checked');
values = elems.map(function(obj) {return obj.value});

When I read the documentation in MDN, I saw that I had to use something like this instead:

var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj) {
  return obj.value;
});

My question is, if what I get from querySelectorAll is an array, why can't I use the first expression, like I would for any other array?

• javascript

• 5 querySelectorAll does not return array, it returns array-like-object. If you are referring docs, read it pletely... – Rayon Commented Sep 2, 2016 at 20:25
• 2 Why is NodeList not an Array? – Rayon Commented Sep 2, 2016 at 20:27

2 Answers 2

My question is, if what I get from querySelectorAll is an array, why can't I use the first expression, like I would for any other array?

querySelectorAll does not return an array, it returns a NodeList.

From MDN (emphasis mine):

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

NodeList does not have Array.prototype in its prototype chain, so it doesn't have the array methods.

As others pointed out, a node list (querySelectorAll) is not the same as an Array. With ES6 you can do this as a one liner with the spread operator (which converts to an array):

const checkedOptions = [...document.querySelectorAll('select option:checked')].map(option => option.value);