Using A NodeList as an Array
The Scenario:
I had queried a bunch of tags, using querySelectorAll(), and received a NodeList in return.
The Problem:
NodeLists are like arrays (i.e. they have a length property, they are accessed by an index in brackets: NodeList[0]) however, try using .map, or .filter, or .forEach on one.
The Approach:
The options out there were varied. From looping through and filling an Array to some more clever es6 options like:
var elements = [... nodelist]
var elements = Array.from(nodelist)
However, these have a problem... they worked too well. You now had an array INSTEAD of a NodeList. Sure, it had all the data from the NodeList but it no longer identified itself as a NodeList.
What's the problem with that?
Try:
nodeElementInTheArray.compareDocumentPosition(anotherNodeElementInTheArray)
This will error out because the argument is not a true NodeListItem.
Lets reframe our needs
We don't need our NodeList to be an Array, we just need those properties from Arrays. This is the perfect place for object composition.
The Solution
Object.assign(*NODELIST*, Object.Array)
Our NodeList remains a NodeList, and it acquires those Array traits we need while not modifying its prototype. I didn't see this solution anywhere, likely because it's never what is asked for. So instead of asking, how do I make A become B, ask how can I get A to behave like B, and the answer will likely be 'Object Composition'
Top comments (2)
I like this solution. Only very recently I came across this problem myself as well (I mainly only do back end), and I solved it through
[].forEach.call(NodeListHere, function () {})
as I didn't want to change original object.There are some issues in this article. I can guess some of those come from the notation you've used?
That's correct for
map
andfilter
, butforEach
has now been added toNodeList.prototype
.It won't. Elements in a
NodeList
are objects of classNode
, and that's what matters, becausecompareDocumentPosition
is defined in the prototype of theNode
class. The classNodeListItem
doesn't exist in JavaScript, and anyway spreading the node list into an array, or usingArray.from
on it, won't change the class of its items: they will still beNode
instances.The question remain, here: why do you need a
NodeList
for? In all my career, when I needed it, I've always been happy to have an array instead, back when in ES3 I had to do this:That won't work. First, it's just
Array
, whileObject.Array
doesn't exist. Then, asArray
is just a constructor, it's the methods fromArray.prototype
that you'd probably want. But then again,Object.assign
copies the properties from the source to the destination object, but only the enumerable ones. Now,map
,filter
and all the others are not enumerable, so your node list won't get any additional property.Moreover, there's another concern here. Even if you do copy a method like
map
to your node list, like this:The object returned by
map
would not be aNodeList
, but anArray
. (That makes a lot of sense, as you could get a list of whatever you want withmap
, but aNodeList
is purely a list of... nodes.)Other methods like
push
orsplice
modify the source object itself, butNodeList
's are immutable in JavaScript so those methods would throw aTypeError
.One way to actually have the methods from arrays in a node list, and have it still as an instance of
NodeList
, is to replace its prototype:But this, of course, is not object composition, and it's also generally frowned upon as mutating an object's prototype has quite some overhead.