Comparing two equal nodes' childNodes returns false, comparing their innerHTML returns true, why?

Question

I'm building a very basic function that compares two DOM's in Node.js, and I intend to not only detect the difference, but also identify the exact difference. Surprisingly, when I use two equal DOM's (reconstructed using jsdom), comparing the nodes' childNodes returns false when using childNodes, and true when I use innerHTML.

const checkForUpdates = function(website) {

  let oldDom = new JSDOM(website.storedPage.page);
  oldDom = oldDom.window.document.querySelector('body');

  let newDom = new JSDOM(website.newPage.page);
  newDom = newDom.window.document.querySelector('body');

  const startChecking1 = function(someDom, anotherDom) {
   return someDom.childNodes === anotherDom.childNodes;
   // This returns false
  };

  const startChecking2 = function(someDom, anotherDom) {
   return someDom.innerHTML === anotherDom.innerHTML;
   // This returns true 
  };

  console.log(startChecking(oldDom, newDom));

};

For my purposes, it isn't strictly necessary to use childNodes, and perhaps it isn't intended for this type of conditional statements, but I'm still surprised that it would return true if these DOM's are exactly the same. Even when I use '==' instead of '===', I will get false.

Appreciate your help!

Same reason `[1,2] !== [1,2]` but `[1,2].toString() === [1,2].toString()`. — Jared Smith, Sep 19 '17 at 16:45

score 5 · Accepted Answer · answered Sep 19 '17 at 16:42

5

Calling .innerHTML returns serialized content which is basic string matching.

Trying to compare .childNodes is trying to compare objects which isn't a straight comparison in javascript.

Object comparison in JavaScript

answered Sep 19 '17 at 16:42

VtoCorleone

16,813
5
37
51

Comparing two equal nodes' childNodes returns false, comparing their innerHTML returns true, why?

1 Answers1