Шрифт:
14.7. Элементы документа как свойства окна
Если для именования элемента в HTML-документе используется атрибут
id
и если объект Window
еще не имеет свойства, имя которого совпадает со значением этого атрибута, объект Window получает неперечислимое свойство с именем, соответствующим значению атрибута id
, значением которого становится объект HTMLElement
, представляющий этот элемент документа. Как вы уже знаете, объект
Window
играет роль глобального объекта, находящегося на вершине цепочки областей видимости в клиентском JavaScript. Таким образом, вышесказанное означает, что атрибуты id
в HTML-документах становятся глобальными переменными, доступными сценариям. Если, например, документ включает элемент <button id='okay”/>,
на него можно сослаться с помощью глобальной переменной okay
. Однако важно отметить, что этого не происходит, если объект
Window
уже имеет свойство с таким именем. Элементы с атрибутами id
, имеющими значение «history», «location»
или «navigator»,
например, не будут доступны через глобальные переменные, потому что эти имена уже используются. Аналогично, если HTML-документ включает элемент с атрибутом id
, имеющим значение «х» и в сценарии объявляется и используется глобальная переменная х, явно объявленная переменная скроет неявную переменную, ссылающуюся на элемент. Если переменная объявляется в сценарии, который в документе находится выше именованного элемента, наличие переменной будет препятствовать появлению нового свойства окна. А если переменная объявляется в сценарии, который находится ниже именованного элемента, первая же инструкция присваивания значения этой переменной затрет значение неявно созданного свойства. В разделе 15.2 вы узнаете, что с помощью метода
document.getElementByld
можно отыскивать элементы документа по значениям их HTML-атрибутов id
. Взгляните на следующий пример:
var ui = ["input","prompt","heading"]; // Массив идентификаторов элементов
ui.forEach(function(id) { // Отыскать элемент для каждого id
ui[id] = document.getElementById(id); // и сохранить его в свойстве
});
После выполнения этого фрагмента свойства
ui.input, ui.prompt
и ui.heading
будут ссылаться на элементы документа. Вместо ui.input
и ui.heading
сценарий мог бы использовать глобальные переменные input и heading. Но, как вы помните из 14.5, объект Window
имеет метод с именем prompt,
поэтому сценарий не сможет использовать глобальную переменную prompt
вместо свойства ui.prompt
. Неявное использование идентификаторов элементов в качестве глобальных переменных - это пережиток истории развития веб-броузеров. Эта особенность необходима для сохранения обратной совместимости с существующими веб-страницами, но использовать ее сейчас не рекомендуется - в любой момент производители броузеров могут определить новое свойство в объекте
Window
, что нарушит работу любого программного кода, использующего неявно определяемое свойство с этим именем. Поиск элементов лучше выполнять явно, с помощью метода document.getElementById.
А его использование будет менее трудоемким, если дать ему более короткое имя:
var $ = function(id) { return document.getElementByld(id); };
ui.prompt = $("prompt");
Многие клиентские библиотеки определяют функцию
$
, которая отыскивает элементы по их идентификаторам, как в примере выше. (В главе 19 мы узнаем, что функция $
в библиотеке jQuery является универсальным методом выбора элементов, который может возвращать один или более элементов, опираясь на их идентификаторы, имена тегов, атрибут class
или исходя из других критериев.) Любой HTML-элемент с атрибутом
id
становится значением глобальной переменной, если значение атрибута id
еще не используется объектом Window
. Следующие HTML-элементы ведут себя подобным образом, если в них определен атрибут name
:
<а> <applet> <area> <embed> <form> <frame> <frameset> <iframe> <img> <object>