Почему консоль выводит html?

Question

[Владислав Чернушевич]

Есть такой код
<div id="box"></div>

Если прописать
console.log(box)

То в консоли выведется такой html код <div id="box"></div>
Почему так происходит? Переменная же нигде не объявлялась Что это за особенность такая?

Comments

[Владислав Чернушевич]

Уверен
https://yadi.sk/i/hKo_qNRMjt6JT
https://yadi.sk/i/dpCH8p2rjt6Jr

[Владислав Чернушевич]

А у тебя что выводит?

Answer 1

[Юрий Ярош]

Все элементы DOM дерева с объявленным id автоматически становятся атрибутами глобального объекта window. console.log(box); и console.log(window.box); - одно и тоже. Это стандартное поведение для cовременных браузеров (ES5+ afaik) и одна из причин по которой секторы на основе id выполняются медленее чем уникальные селекторы на основе сlass атрибута, привет БЭМ.

На примере этой же страницы можно вбить console.log(window.adriver_banner_403766071); в консоль браузера.

Comments

[Алексей Уколов]

Добавлю ссылку на учебник. Там же описано, почему этим не стоит пользоваться.

[murrometz]

А почему "селекторы на основе id выполняются медленнее, чем уникальные селекторы на основе сlass атрибута"?

[Юрий Ярош]

murrometz: мне сложно сказать "почему", могу лишь судить по существующим бэнчмаркам (когда-то проскакивали на хабре) и предположить что там где-то фигурирует фильтр Блума и какая-то реализация префиксного дерева. В общем так принято считать со времён второго фаэрфокса :| и это стало одной из причин популяризации БЭМ в Яндексе в далёком ~2008ом.