JavaScript: the same element received by getElementById, but .. different?

Question

I really hope that I missed something obvious here. Here is a screenshot of the Chrome console dead in front of me (well, another tab):

e was received via .getElementById("overlayidentifier") me, from the console. Another variable is used by a rather dirty script included in the site that I may be working with.

Before diving into the abyss of a script that originally creates and works with an overlayidentifier , I just wanted to know .. what happens here.

Any .style changes in e have an effect - nothing happens if overlayidentifier.style.~ changed.

Where to begin?

Demystified. For the more curious:

The problem was that the page had a lonely .innerHTML += -shaped piece of code. Using .innerHTML causes the DOM structure to be rebuilt within the element on which it is called. Thus, any links of elements inside received before the .innerHTML destination become invalid in a confusing way: they retain most of their attributes, which can be normally interacted with, but they are no longer in the DOM tree. This is indicated by a .parentNode returning null .

In fact, it was a waste of time.

Answer 1

You have two elements with an identifier overlayidentifier , as evidenced by the small arrow ">" and ... , in which your div has content when you enter an overlayidentifier , which are not present when entering e

To clarify, since one of your nodes has a ">" and the other does not, you have two different nodes.

Answer 2

overlayidentifier object may be a clone of a DOM element with an overlayidentifier identifier. If it were cloned, it would contain at least the same HTML and attributes (and possibly the same event handlers and children if it is a deep clone), but it no longer represents the actual element inside the DOM.

Making changes using style() will not have a visible effect until it is placed in the DOM. Hope this helps!

Answer 3

When you type chrome directly into the console, and you just write the identifier, it will return the element plus all its contents. However, in the screenshot “e”, var returns a div with no nested elements inside that div.

When I execute getElementById () of the same ID, I get the same response.

What tells me is that the moment your variable e was set, the contents of the div were not there, maybe.