Is there a way to compare the equality of two NodeLists?

Question

Is there a way to compare the equality of two NodeLists?

Suppose I have created a custom function that should return a NodeList:

getNodeList('foo');

I anticipate that this NodeList will match the NodeList returned from:

document.querySelectorAll('.foo');

Is there a way to verify if my assumptions are accurate?

The following comparison method does not yield the desired result:

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

It seems like there must be a technical reason why this doesn't work, as evidenced by

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

, which also fails. This outcome is expected.

How can I determine whether two NodeLists contain identical HTML nodes?

javascript object nodelist

Answer 1

Answer №1

When it comes to comparing arrays, remember that equality is determined by reference, not content.

let a = [1, 2, 3], b = [1, 2, 3]
let c = a
a == c // => true, since both point to `a`
a == b // => false

If you need to compare two array-like objects, you must compare them element by element.

function eq(A, B) {
  if (A.length !== B.length) return false;
  for (let i = 0; i < A.length; i++) {
    if (A[i] !== B[i]) return false;
  }
  return true;
}

You can also utilize some functional programming techniques:

let arrayEq = (A, B) => A.length === B.length && A.every((element, index) => element === B[index]);

Just keep in mind that this approach only works with actual arrays, and not with NodeList objects.

Give it a shot with

eq(getNodeList('foo'), document.querySelectorAll('.foo'))

or

arrayEq(Array.from(getNodeList('foo')), Array.from(document.querySelectorAll('.foo'))

Answer 2

When it comes to comparing arrays, remember that equality is determined by reference, not content.

let a = [1, 2, 3], b = [1, 2, 3]
let c = a
a == c // => true, since both point to `a`
a == b // => false

If you need to compare two array-like objects, you must compare them element by element.

function eq(A, B) {
  if (A.length !== B.length) return false;
  for (let i = 0; i < A.length; i++) {
    if (A[i] !== B[i]) return false;
  }
  return true;
}

You can also utilize some functional programming techniques:

let arrayEq = (A, B) => A.length === B.length && A.every((element, index) => element === B[index]);

Just keep in mind that this approach only works with actual arrays, and not with NodeList objects.

Give it a shot with

eq(getNodeList('foo'), document.querySelectorAll('.foo'))

or

arrayEq(Array.from(getNodeList('foo')), Array.from(document.querySelectorAll('.foo'))

Answer 3

Answer №2

Your progress is on the right track, but there are opportunities for improvement in terms of efficiency (avoiding unnecessary recomputations of `document.querySelectorAll(...)` and `indexOf` multiple times).

A critical bug to take note of is that if the return from `querySelectorAll` contains more elements than the first node list, but they are identical, your function will incorrectly output `true`.

To streamline the comparisons even further, consider this revised approach:

function compareNodeLists( nodeList1, nodeList2 ) {
    if ( nodeList1.length !== nodeList2.length ) {
        return false;
    }
    return Array.from( nodeList1 ).every( ( node, index ) => node === nodeList2[ index ] );
}

Answer 4

Your progress is on the right track, but there are opportunities for improvement in terms of efficiency (avoiding unnecessary recomputations of `document.querySelectorAll(...)` and `indexOf` multiple times).

A critical bug to take note of is that if the return from `querySelectorAll` contains more elements than the first node list, but they are identical, your function will incorrectly output `true`.

To streamline the comparisons even further, consider this revised approach:

function compareNodeLists( nodeList1, nodeList2 ) {
    if ( nodeList1.length !== nodeList2.length ) {
        return false;
    }
    return Array.from( nodeList1 ).every( ( node, index ) => node === nodeList2[ index ] );
}

Answer 5

Answer №3

For those who are open to using a third-party library, consider downloading deep-equal from NPM and executing the following:

deepEqual(Array.from(getNodeList('foo')), Array.from(document.querySelectorAll('.foo')))

By doing this, you are ensuring that your lists are only processed once and all the complexities of list comparison are handled by a separate function. Your code can simply call an equality function without having to deal with the intricacies of navigating through list structures. (But chances are, you already knew that!)

If you find Array.from too verbose, you can use splats instead:

deepEqual([...getNodeList('foo')], [...document.querySelectorAll('.foo')])

For those concerned about efficiency, it might be worth conducting some profiling.

Answer 6

For those who are open to using a third-party library, consider downloading deep-equal from NPM and executing the following:

deepEqual(Array.from(getNodeList('foo')), Array.from(document.querySelectorAll('.foo')))

By doing this, you are ensuring that your lists are only processed once and all the complexities of list comparison are handled by a separate function. Your code can simply call an equality function without having to deal with the intricacies of navigating through list structures. (But chances are, you already knew that!)

If you find Array.from too verbose, you can use splats instead:

deepEqual([...getNodeList('foo')], [...document.querySelectorAll('.foo')])

For those concerned about efficiency, it might be worth conducting some profiling.

Answer 7

Answer №4

I have devised a solution using ES6 features that appears to be effective:

const isEqual = [...getElements('foo')].every((element, index) => {
    return Array.from(document.querySelectorAll('.foo')).indexOf(element) === index
});

In simple terms, this method checks if each element in the first NodeList can be found in the second NodeList at the same position. If there are any inconsistencies between the NodeLists, the function will return false.

Answer 8

I have devised a solution using ES6 features that appears to be effective:

const isEqual = [...getElements('foo')].every((element, index) => {
    return Array.from(document.querySelectorAll('.foo')).indexOf(element) === index
});

In simple terms, this method checks if each element in the first NodeList can be found in the second NodeList at the same position. If there are any inconsistencies between the NodeLists, the function will return false.

Answer 9

Answer №5

Upon revisiting this code, I found a use case where I needed to compare NodeLists that might not have the same node order but are otherwise identical. Here is the solution I came up with:

function determineEquality(nodeList1, nodeList2) {
    if ((nodeList1.length || Object.keys(nodeList1).length) !== (nodeList2.length || Object.keys(nodeList2).length)) {
        return false;
    }

    return Array.from(nodeList1).every(node1 => {
        return Array.from(nodeList2).some(node2 => node1 === node2)
    });
}

Answer 10

Upon revisiting this code, I found a use case where I needed to compare NodeLists that might not have the same node order but are otherwise identical. Here is the solution I came up with:

function determineEquality(nodeList1, nodeList2) {
    if ((nodeList1.length || Object.keys(nodeList1).length) !== (nodeList2.length || Object.keys(nodeList2).length)) {
        return false;
    }

    return Array.from(nodeList1).every(node1 => {
        return Array.from(nodeList2).some(node2 => node1 === node2)
    });
}

Answer 11

Answer №6

Here's a streamlined and potentially quicker version by @mauroc8:


     const compareNodes = (arrayA, arrayB) => {
        arrayA = Array.from(arrayA)
        arrayB = Array.from(arrayB)
        if (arrayA.length !== arrayB.length) return false

        return arrayA.every((a, b) => a.innerHTML === arrayB[b].innerHTML)
      }

Answer 12

Here's a streamlined and potentially quicker version by @mauroc8:


     const compareNodes = (arrayA, arrayB) => {
        arrayA = Array.from(arrayA)
        arrayB = Array.from(arrayB)
        if (arrayA.length !== arrayB.length) return false

        return arrayA.every((a, b) => a.innerHTML === arrayB[b].innerHTML)
      }

Is there a way to compare the equality of two NodeLists?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Ajax/PHP - unrecognized value in autofill

Can the Vue instance be accessed in Axios interceptors?

Using D3-GraphViz in Javascript along with an Angular template: A step-by-step guide

Update the value of a Vue tree select component using JavaScript

The outputs of base64(sha256(data)) from nodejs crypto and CryptoJS are showing discrepancies

Issue with AngularJS Cross-Origin Resource Sharing (CORS) when making HTTP requests, whereas standard Ajax and jQuery are

Failing to retain hyperlinks with ajax

"Utilize browser detection to direct users to appropriate pages - whether by using htaccess or another method

Error: Undefined variable in JavaScript obfuscation

Using a javascript parameter in a cshtml file to filter data in a datatable

Running a server-side function on the client-side in Node.js

Using a try-catch block within an axios call inside the then method in a Node

Error Timeout Encountered by Langchain UnstructuredDirectoryLoader

How can I reset the DefaultValue of my Autocomplete input field after submitting?

Trouble with updating the view when an array is modified in ng-repeat? It seems like using $scope.$apply() may not

Is there a way to execute this process twice without duplicating the code and manually adjusting the variables?

Stop Code Execution || Lock Screen

Issue with conflicting trigger events for clicking and watching sequences in input text boxes and checkboxes within an AngularJS application

How to utilize the index in a foreach loop as a variable in JavaScript

Angular Tip: Display data in a dropdown using a select element