Почему бы нам просто не использовать идентификаторы элементов в качестве идентификаторов в JavaScript?

все браузеры, с которыми я пришел работать, позволяют получить доступ к элементу с id="myDiv" просто пишем:

myDiv

смотрите здесь:http://jsfiddle.net/L91q54Lt/

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

document.getElementById("myDiv")

или, может быть,

document.querySelector("#myDiv")

для доступа к элементу DOM, даже если его идентификатор известен заранее (т. е. не рассчитывается во время выполнения). Я могу сказать, что последние подходы имеют преимущество в сохранении кода в безопасности, если кто-то непреднамеренно пытается переопределить myDiv в более широком диапазоне (не такая блестящая идея, хотя...), перезаписывает его с некоторым другим значением и продолжает, не замечая столкновения.

что? Есть ли какие-либо проблемы в использовании короткой формы выше, кроме дизайна кода, или что еще я пропустил здесь?

45
dom getelementbyid javascript

3 ответов

во всяком случае, этот метод кажется довольно плохо документированным, и на самом деле источники, с которыми я сталкиваюсь, даже не упоминают об этом [...]

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

явное продвижение id значения в глобальные переменные не соответствуют стандартам (спецификация HTML5 для атрибута ID не упоминает об этом) и, поэтому вы не должны предполагать, что будущие браузеры будут его реализовывать.

EDIT: оказывается, это поведение и стандарты уступчивые-в HTML5,window должен поддерживать доступ свойств к "именованным элементам":

именованные объекты с именем name для целей приведенного выше алгоритма-это те, которые являются:

  • дочерние контексты просмотра активного документа, имя которого имя,
  • а апплет, уголок, размещения, форм, фреймов, ИМГ, или элементы, которые атрибут содержимого name, значение которого имя или
  • HTML элементы, которые имеют id атрибут content, значение которого составляет имя.

источник: HTML 5 spec, "именованный доступ к объекту окна", выделено мной.

основываясь на этом, стандарты соблюдение не является причиной для того, чтобы избегать этой модели. Однако сама спецификация не советует ее использовать:

как правило, полагаться на это приведет к хрупкому коду. Который IDs в конечном итоге сопоставление с этим API может меняться с течением времени, так как новые функции например, добавлена в веб-платформу. Вместо этого, используйте document.getElementById() или document.querySelector().

39

большой вопрос. Как, вероятно, не сказал Эйнштейн, все должно быть как можно проще, и не проще.

последние подходы имеют преимущество в сохранении кода в безопасности, если кто-то непреднамеренно пытается переопределить myDiv в более широкой области (не такая блестящая идея, хотя...), перезаписывает его с некоторым другим значением и продолжает, не замечая столкновения

это главная причина, почему это плохая идея, и это вполне достаточно. Глобальный на переменные небезопасно полагаться. Они могут быть перезаписаны в любое время любым скриптом, который в конечном итоге запускается на странице.

В дополнение к этому, просто набрав в myDiv не является "короткой формой"document.getElementById(). Это ссылка на глобальную переменную.document.getElementById() С радостью вернется null если элемент не существует, при попытке получить доступ к несуществующей глобальной переменной будет выдавать ссылочную ошибку, поэтому вам нужно будет обернуть свои ссылки на глобальный блок try / catch, чтобы быть безопасный.

это одна из причин, почему jQuery так популярен: если вы делаете $("#myDiv").remove(), и нет элемента с идентификатором myDiv, никакая ошибка не будет брошена-код просто молча ничего не сделает, что часто именно то, что вы хотите при выполнении манипуляции DOM.

19

есть несколько причин:

вы не хотите, чтобы ваш код и разметку, что в сочетании.

используя конкретный вызов для доступа к div, вам не нужно беспокоиться о повреждении глобального пространства. Добавьте библиотеку, которая объявляет myDiv в глобальном пространстве, и вы находитесь в мире боли, которую будет трудно исправить.

вы можете получить доступ к элементам, по ID, которые не являются частью DOM

Они могут быть в фрагмент, рамка или элемент, который был отсоединен и еще не присоединен к DOM.

EDIT: пример доступа к непривязанным элементам с помощью ID

var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.id = "span-test";
frag.appendChild(span);
var span2 = frag.getElementById("span-test");
alert(span === span2);
12