Do browsers store references to DOM elements differently to the way they store references to Objects?

Question

I have some code that does not work as expected:

debug.xAccBar = document.querySelector("#xAcc > div");
console.log(debug.xAccBar === document.querySelector("#xAcc > div")); // false

What exactly is going on here? From a practical point of view it means that when I debug.xAccBar.style.width = "20px"; it doesn't affect the visible element on screen. But apart from that, if I assign something to debug.zAccBar then I expect that thing to still be assigned one line later.