Интересные возможности vanilla.js - доступ по id

#javascript #ecmascript

OneOne!





Может для кого то я и не открыл Америку, но сам столкнулся впервые.
Т.е. я не должен писать document.getElementById('oneOne');
Т.к. любые "переменные" и функции, вызванные через объект window - это его свойства
и методы, значит все ИД всех елементов заносятся в свойства этого объекта.

Вопрос:

Когда это вообще появилось?

На сколько это хорошо в использовании (явно удобней, чем через get)?

Какие ограничения и по какой причине не используется массово?

Или просто сейчас мало кто использует чистый JS?

У кого есть ссылки на спецификацию и / или статьи на эту тему?
    

Ответы

Ответ 1

Если элементу назначен специальный атрибут id, то можно получить его прямо по переменной
с именем из значения id.
  
  Это поведение соответствует стандарту. Оно существует, в первую очередь, для совместимости,
как осколок далёкого прошлого и не очень приветствуется, поскольку использует глобальные
переменные. Браузер пытается помочь нам, смешивая пространства имён JS и DOM, но при
этом возможны конфликты.
  
  Более правильной и общепринятой практикой является доступ к элементу вызовом document.getElementById("идентификатор").


Отсюда


  As a general rule, relying on this will lead to brittle code. Which IDs end up
mapping to this API can vary over time, as new features are added to the Web platform,
for example. Instead of this, use document.getElementById() or document.querySelector().


Спецификация

P.S. К vanilla.js это отношения не имеет.


Ответ 2

Я бы забыл об этом способе, как о страшном сне. Вот посмотрите на проблему 1:

 


теперь пробуем найти элемент:

console.log(document.getElementById('test')); // нашли
console.log(test); // нашли

// ищем какой-то другой элемент, которого может не быть
console.log(document.getElementById('test2')); // упс, такого нет, null
console.log(test2); // Uncaught ReferenceError: test2 is not defined - проблема


Так что, как видите, поскольку это не геттер, то нам не гарантируется получение осмысленного
результата.

Проблема 2:

var test = "Ohhh!";

console.log(document.getElementById('test')); // нода
console.log(test); // Ohhh!


Как видите, поскольку это глобальный объект window, то очень очень легко перезаписать
подобную переменную чем то другим.