Вход/Регистрация
JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид

Шрифт:

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>

  • Читать дальше
  • 1
  • ...
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: