Why can't I use map on the result of a querySelectorAll?

Question

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?

Answer 1

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.

Answer 2

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);