HTML, Excel, Word, SEOОсновы JavaScript ⇒ Иерархия документов в бразуере

ОСНОВЫ JavaScript

Учебник JavaScript
·Знакомство с JS. Переменные, операторы, операции
·Функции
·Модель HTML документа
·Иерархия документов в бразуере
·Формы
·Окна и фреймы
·Ссылки, заголовок, статус
·События
·События клавиатуры и мыши
·События. Таймер
·Стили. Управление стилями
·Слои и блоки. Управление видимостью
·Объекты JS
·Внешние объекты
·Внутренние объекты
·Массивы
·Регулярные выражения
·Математика в JS
·Пример простого калькулятора
·Дата и время
·Cookies и хранение состояния
·Немного об AJAX
·Работа с WebMoney

 

Иерархия документов в бразуере



Объекты Navigator, Window, Images, Forms

Вложенность документов. Children у документа

Предыдущая глава описывала так называемую объектную модель документа (DOM), которая  начала использоваться примерно в 2000 году. Стандарт объектной модели, названный DOM Level 1 (а есть еще и DOM Level 2, и даже DOM Level 3) был принят 1 октября 1998 года. Причем следует заметить, что даже этот стандарт является не более чем рекомендацией (а не обязательными требованиями).

Впрочем, если вспомнить историю языка JavaScript, то легко заметить, что язык появился гораздо раньше. Каким же образом язык использовался до введения DOM-модели? 

На этот вопрос можно ответить, посмотрев в оригинальную спецификацию JavaScript, опубликованную фирмой Netscape. Хотя ни дерева элементов, ни методов для манипуляции этим деревом не было, способы обращения к документу уже были. Именно эти методы из оригинальной спецификации также были (с некоторыми изменениями) реализованы и в Internet Explorer, и в Opera. Впоследствии, после принятия стандарта DOM 1 эти методы получили название DOM 0 (то есть, фактически -- «то что было до DOM»), и, хотя эти методы уже являются по существу устаревшими, они часто используются в скриптах и в некоторых случаях даже более эффективны, чем новые DOM-средства.  

О структуре классов, которые существовали до DOM, и пойдет речь. 

Объекты navigator, window, images, forms

Модель классов браузера, позволяющая программам на языке JavaScript взаимодействовать с документом и браузером в целом, базируется на объекте window. Все последующие модели взаимодействия так или иначе используют уже реализованные классы.

Фактически, объект window является отображением окна браузера в скрипте. Он содержит в себе объект информации о браузере (navigator), объект «экрана» (то есть визуального отображения) screen, фреймы, если таковые есть, собственно HTML документ (а куда же без него?), а также связан с историей переходов, панелями меню и так далее... В общем, большая часть того, что есть в браузере, есть также и в этом объекте.

Единственное неудобство – каждый браузер содержит немного различные свойства объекта окна, так что не всегда можно быть уверенным, что свойство или функция поддерживается. Как пример можно взять проверку полноэкранного режима отображения при помощи свойства window.fullscreen  (в Mozilla Firefox это можно сделать, а в IE и Opera – нельзя). Кроме того, нужно быть осторожным с определением глобальных функций и переменных. Переопределить функцию, если существует другая функция с таким же именем, нельзя, а переопределение переменной (или что еще хуже – использование необъявленной переменной) может привести к непредсказуемым результатам.

Если объект window связан с окном (или вкладкой) браузера, то объект navigator связан со всем браузером целиком. Именно этот объект используется для определения типа браузера, а также операционной системы. Кроме этого, при помощи объекта navigator можно определить операционную систему, язык выбранный в браузере по умолчанию и список mime-типов и установленных плагинов.

Объект screen тоже является «составной частью» окна и, в свою очередь, связан с областью  показа страницы (то есть той частью окна, в которой и показывается уже отрисованная страница, не включая скроллинг). Благодаря этому объекту можно получать экранное разрешение, суммарный размер страницы и положение скроллеров (то есть, например, можно отслеживать, прокрутил ли пользователь страницу до самого низа или огранизовать скроллинг меню к определенной точке экрана в процессе прокрутки). Кроме того, этот же объект используется почти всеми счетчиками посещений для того чтобы определить разрешение экрана и глубину цвета.

Объекты images, forms, а кроме них – объекты links, anchors, embeds и applets использовались (и могут использоваться по нынешнее время) доступа к элементам документа. О некоторых из этих объектов пойдет речь ниже, о других – в следующих главах.

Вложенность документов. Children у документа.

Говоря о вложенности, сразу предупрежу – рассматриваться будут как коллекции объектов (формы, картинки и прочее), так и загружаемые объекты (скрипты, картинки и стили). Первые – потому что они представляют собой альтернативные способы доступа к элементам, то есть реализуют дочерние элементы документа. 

Вторые – потому что более подходящего места не нашлось (а где еще можно описывать «вложенные документы», как не во вложенности документов?), и потому что они тоже в определенной степени являются потомками документа. 

Итак, первое – коллекции элементов. 

Как вы уже знаете, к любому элементу можно обратиться при помощи ссылок внутри дерева элементов, а также при помощи функций поиска элементов. 

Но описываемый способ немного отличается. 

Любой браузер по соображениям совместимости несет в себе наследие предков, то есть – браузеров меньшей версии. 

Этим наследием являются объекты document.forms, document.images, document.links, document.embeds и document.applets.

Если последние два из них используются очень редко – вряд ли увидишь в наше время страницу со внедренными Java (без script) апплетами, а из внедренных документов используются в лучшем случае Flash-анимации, то первые три весьма и весьма востребованы. 

Эти объекты содержат в себе коллекции (или, иначе, массивы) форм (это, как вы поняли, document.forms), картинок и ссылок текущего HTML-документа.

По сути, все эти объекты похожи, поэтому я буду рассматривать объект document.images как пример всех остальных объектов.

Объект document.images представляет из себя массив. То есть каждый элемент этого объекта – ссылка на картинку (причем – только заданную тегом img, в то время еще никто не слышал про стили и использование свойства background).

Неважно, в каком месте документа находится эта картинка – она обязательно попадет в массив document.images

Для каждой картинки можно менять адрес исходного файла простым изменением свойства src картинки, а также изменять width и height (но не во всех браузерах это изменение работает нормально).

Самое приятное свойство этого массива – он в какой-то степени заменяет функцию getElementByTagName, которая была введена только в самых новых браузерах, правда, только для тега img.

Объект document.images используется для множества вещей. Например, с его помощью в свое время делались анимации при наведении мыши – дело в том, что при смене адреса исходного файла браузер загружал этот файл (или брал из кэша) и – как следствие – начинал проигрывание gif-анимации при наличии таковой. Да и просто можно было поменять картинку на другую при наведении

Кроме того, этот же объект позволял сделать «предварительную загрузку» изображений. Если вы не знаете, зачем это нужно было – прочтите еще раз предыдущий абзац. 

Представьте – все картинки загрузились, вы наводите мышь на кнопку с таким вот эффектом смены картинки, и новая картинка начинает загружаться... и грузится целых полторы секунды, превращаясь на это время в пустой квадратик. Некрасиво, и портит всю красоту. 

Конечно, сейчас, с появлением таких техник как CSS-спрайты, этот способ кажется наивным, но в свое время он был очень востребованным (даже сейчас можно поискать скрипты под называнием «image preloader» -- вы будете поражены их количеством). 

Объект document.forms предоставляет доступ к формам, причем в том же виде – это обычный массив ссылок на формы (которые, в свою очередь, содержат массивы elements – со ссылками на поля ввода этих форм). Нужно сказать, что иерархия форм двухсторонняя – у любого элемента ввода, который находится внутри формы, есть ссылка на form (тот самый элемент из document.forms). Большинство функций для работы с формами используют именно этот объект.

Основным отличием этих объектов является то, что к элементу можно обратиться как по индексу (как в обычном массиве), так и по имени элемента – в том случае, если у элемента задан параметр name.

А теперь, плавно перейдем от картинок к загружаемым элементам. 

Элемент, который загружается из отдельного файла, можно назвать загружаемым. К сожалению,  порядок загрузки файлов точно определить нельзя – большинство браузеров, конечно, загружают и выполняют скрипты в порядке их появления в HTML коде, но стопроцентной гарантии дать нельзя (это не описано в стандартах).

Загружаемые элементы обязательно имеют адрес файла или ресурса, из которого они загружаются – адрес этого «файла» задается или при помощи атрибута src, или – для тегов rel – при помощи атрибута href.

Если изменить значение этого атрибута, то будет загружено и применено новое содержимое (по крайней мере в Firefox, Opera и Internet Explorer – как это проиcходит в Safari я не знаю, проверить нечем). Таким образом можно загрузить новую картинку, сменить стиль, указать другой адрес у iframe...

А вот загрузить новый скрипт таким образом нельзя. К сожалению, замена адреса у тега script не дает таких результатов – новый скрипт не загружается, а старый никуда не девается.

Единственный способ «догрузить» новый скрипт – это создать еще один тег script с нужным вам адресом.

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

Поэтому тут нужно использовать исключительно createElement, или, на худой конец, document.write (что очень не рекомендуется – функция устарела давным давно, и без полного понимания, как она работает, лучше ее не использовать – ну, примерно как и innerHtml).

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

Ну, и напоследок, немного приятного – для элементов, которые загружаются, можно создавать события загрузки (чаще всего onLoad). Я еще напомню об этом в главе про события (и заодно расскажу, что такое эти события), а сейчас можете просто сделать пометку на будущее, что это свойство – есть.



В начало страницы



В начало страницы