How can I test the equality of two NodeLists?

Question

Let's say I have a custom function, that I expect will return a NodeList:

getNodeList('foo');

I expect this NodeList to be the same NodeList returned from:

document.querySelectorAll('.foo');

How can I check that my expectations are correct?

Doing this does not work:

getNodeList('foo') == document.querySelectorAll('.foo')

I'm sure there's a good technical reason why this doesn't work, since document.querySelectorAll('.foo') == document.querySelectorAll('.foo') also does not work, I take it that this is expected.

How can I test whether two NodeLists contain the same HTML nodes?

Answer 1

What you have so far seems ok, but it is inefficient (you'll be recomputing document.querySelectorAll(...) and indexOf possibly many times).

There is also a bug: if the querySelectorAll returns more elements than the first node list, but they are otherwise equal, your function will return true.

You can also simplify the comparisons further:

function nodeListsAreEqual( list1, list2 ) {
    if ( list1.length !== list2.length ) {
        return false;
    }
    return Array.from( list1 ).every( ( node, index ) => node === list2[ index ] );
}