Переменная JS может быть видна в консоли Chrome, но не определена явно

Question

Noob Вопрос дня:

Я создал веб-страницу с элементом HTML, который имеет идентификатор.Эта веб-страница использует jquery и несколько других библиотек.

ex) <div id="personList ">

В .js, используемом страницей, я манипулирую элементом, используя jquery, а его #id в качестве селектора- работает как шарм.

ex) $("#personList")...

В консоли Chrome просто введите personList, чтобы отобразить элемент HTML и его атрибуты.Я бы предположил, что это не так, поскольку нет переменной javascript, созданной с таким именем ...

Это потому, что:

1. Chrome достаточно умен, чтобы распознавать элемент в DOMи предполагает, что я имел в виду?
2. Что-то автоматически создало переменную из элемента и поместило ее в глобальную (или другую почти глобальную) область видимости?
3. Что-то еще целиком?

Я уверен, что на это где-то был дан ответ, и, вероятно, он хорошо документирован, но я не могу найти его по моим ключевым словам.

Answer 1

По причинам, которые лучше всего теряются в истории, элементы с элементом ID присоединяются к объекту global и действуют как глобальные переменные.

Их можно скрыть, объявив переменную (с let, const или var) в глобальном масштабе.

Когда вы набираете personList в консоли, вы получаете доступ к window.personList.

Это не то поведение, на которое следует полагатьсябольше, но остается сохранить обратную совместимость с древним кодом.

Answer 2

Идентификаторы элемента DOM являются глобальными переменными.

Из HTML5 стандарта

значение атрибута содержимого id для всех элементов HTML, которые не имеют-Impty ID атрибута содержимого и находятся в дереве документа с активным документом контекста просмотра окна в качестве их корня.

Так что, если у нас есть: <div id="bar"></div>, вы можете получить доступ к этому элементу через: window.bar

console.log(window.test);
window.test.innerHTML = 'amazing';

<div id="test"></div>

Использование этой "функции" может стать причиной множества ошибок, поэтому я рекомендую никогда ее использовать.Возьмите следующий пример:

window.that.innerHTML = 'It works';

// some library declares `that` as a global variable
window.that = {};

// This won't work, since window.that no longer references the DOM element
window.that.innerHTML = 'It no longer works';

<div id="that">Evil div</div>