Using A NodeList as an Array: A Practical Use for Object Composition

Julián Herrera — Mon, 28 Aug 2017 19:43:25 +0000

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'