JavaScript: тот же элемент, полученный getElementById, но .. другой?

Question

Я действительно надеюсь, что я пропустил что-то очевидное здесь. Вот скриншот консоли в Chrome, мертвое передо мной (ну, другие вкладки):

e был получен с помощью .getElementById("overlayidentifier") мной, с консоли. Другая переменная используется довольно грязным сценарием, включенным на сайт, с которым я работаю.

Прежде чем я погрузился в бездну скрипта, который изначально создает и работает с overlayidentifier, я просто хотел узнать .. что здесь происходит.

Все .style Изменения в e имеют эффект - ничего не происходит, если overlayidentifier.style.~ изменен.

С чего начать?

Демистифицировано. Для более любопытных:

Проблема была одинокая .innerHTML += -различная часть кода где-то на странице. Использование .innerHTML приводит к восстановлению структуры DOM внутри элемента, на который он вызывается. Таким образом, любые ссылки элементов внутри, полученные до назначения .innerHTML, становятся недействительными в запутанном виде: они сохраняют большинство своих атрибутов, с которыми можно взаимодействовать нормально, но они больше не находятся в дереве DOM. Об этом свидетельствует .parentNode, возвращающий null.

На самом деле это была пустая трата времени.

Answer 1

У вас есть два элемента с идентификатором overlayidentifier, как свидетельствуют мало «>» стрелки и ..., что говорит ваш DIV имеет содержимое, когда вы набираете overlayidentifier, что не существует, когда вы набираете e

К уточните, поскольку один ваших узлов имеет «>», а другой нет, у вас есть два разных узла.

Answer 2

Объект overlayidentifier может быть клон элемента DOM с идентификатором overlayidentifier. Если бы он был клонирован, он содержал бы по крайней мере один и тот же HTML и атрибуты (и, возможно, те же обработчики событий и дочерние элементы, если это глубокий клон ), но он больше не представляет собой фактический элемент внутри DOM.

Внесение изменений с style() не будет иметь видимого эффекта, пока оно не будет прикреплено к DOM где-то. Надеюсь, это поможет!

Answer 3

Когда вы вводите прямо в консоль хром, и вы просто пишете идентификатор, он вернет элемент плюс все его содержимое. Однако на скриншоте 'e' var возвращает div без вложенных элементов внутри этого div.

Когда я выполняю getElementById() того же ID, я получаю тот же ответ.

Что мне говорит о том, что в момент, когда ваша переменная e была установлена, содержимое div не было там, возможно.