Document в html что это

Основы HTML

Что такое HTML на самом деле?

HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:

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

Анатомия HTML элемента

Давайте рассмотрим элемент абзаца более подробно.

Главными частями нашего элемента являются:

Элементы также могут иметь атрибуты, которые выглядят так:

Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.

Атрибут всегда должен иметь:

Вложенные элементы

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент

. Приведённое ниже неверно:

Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!

Пустые элементы

Анатомия HTML документа

Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):

Источник

JavaScript HTML DOM Document

Объект документа HTML DOM является владельцем всех других объектов на веб-странице.

Объект документа HTML DOM

Объект Document представляет веб-страницу.

Если вы хотите получить доступ к любому элементу на HTML-странице, вы всегда начинаете с доступа к объекту document.

Ниже приведены примеры того, как можно использовать объект Document для доступа к HTML и манипулирования им.

Поиск элементов HTML

Изменение элементов HTML

Добавление и удаление элементов

Добавление обработчиков событий

Поиск объектов HTML

Первый уровень HTML DOM 1 (1998), определенные 11 объектов HTML, коллекции объектов и свойства. Они по-прежнему действительны в HTML5.

Позже, в HTML DOM Level 3, добавлено больше объектов, коллекций и свойств.

Источник

1.1. Основы HTML

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

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

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

Элементы могут вкладываться друг в друга, например,

. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки»), например, следующая запись будет неверной:

Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы — заголовки, таблицы, изображения и т.д.

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

Структура веб-страницы

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id ) присвоить элементу соответствующее название:

1.2.4. Элемент

Подключить файл со стилями к веб-странице можно двумя способами:

Для элемента доступны атрибуты, приведенные в таблице ниже, а также ‎глобальные атрибуты.

Источник

Базовая структура HTML-документа с объяснением каждой строчки

Под катом — разбор каждой строчки

Обычно, когда я начинаю новый проект, я либо копирую HTML-структуру последнего сайта, который я создал, либо перехожу к HTML5 Boilerplate и копирую их шаблон. Недавно я не начал новый проект, но мне пришлось документировать структуру, которую мы используем на работе для сайтов, которые мы строим. Таким образом, простое копирование и вставка не были вариантом, я должен был понять, какой выбор был сделан. Поскольку я потратил довольно много времени на исследование и создание структуры, я решил поделиться ею с вами.

Разбор каждой строки

Общее

Для олдскульщиков, нам не нужны никакие другие doc types, которые вы выучили наизусть. Этот будет единственным и неповторимым. Несмотря на то, что сегодня нет других реальных вариантов, он должен присутствовать по соображениям совместимости.

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

Вот как Safari отображает мое имя с метатегом charset и без него.

Manuel Matuzović — Manuel Matuzović

Мета-тег области просмотра позволяет нам изменять ширину области просмотра, что необходимо для адаптивного веб-дизайна. width = device-width устанавливает ширину области просмотра равной ширине экрана. initial-scale управляет уровнем масштабирования при первой загрузке страницы.

Я не уверен, что установка initial-scale = 1 по-прежнему необходима. Кажется, я где-то читал, что это нужно только для Safari на viewport должен появляться в документе как можно раньше, чтобы обеспечить правильную визуализацию документа.

Параметр shrink-to-fit = no больше не нужен, начиная с iOS 9.3.

Заголовок, описание, соцмедиа

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

Я режу горчицу при поддержке модуля JS. Если браузер поддерживает модули JavaScript, это означает, что это браузер, который поддерживает современный JavaScript, такой как модули, синтаксис ES 6, выборка и т. Д. Я отправляю большую часть JS только этим браузерам и использую класс js в CSS, если стили компонента отличается, когда JS активен.

Print CSS для сайта.

Уникальное описание страницы, например, отображаемое на страницах результатов поиска. Он может быть любой длины, но поисковые системы усекают фрагменты до

Уникальное название страницы. Используется парсерами URL-адресов в социальных сетях, таких как Twitter или Facebook.

Уникальное описание страницы. Используется парсерами URL-адресов в социальных сетях, таких как Twitter или Facebook.

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

В идеале это должно быть квадратное изображение с важным содержанием, размещенным в центре квадрата в прямоугольнике с соотношением сторон 2:1. Это гарантирует, что изображение будет хорошо смотреться на карточках с изображениями прямоугольной и квадратной формы.

Вот как это изображение будет выглядеть в Twitter и WhatsApp.

Правила для Twitter: изображения для этой Card поддерживают соотношение сторон 2:1 с минимальными размерами 300×157 или максимальными 4096×4096 пикселей. Размер изображений не должен превышать 5 МБ. Поддерживаются форматы JPG, PNG, WEBP и GIF.

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

Необязательное свойство Open Graph, но рекомендуется. Он определяет естественный язык страницы.

Канонический URL страницы. Обязательное свойство для допустимых страниц Open Graph.

Иконки и адресная строка

theme-color предоставляет браузерам цвет CSS для настройки отображения страницы или окружающего пользовательского интерфейса.

Поддерживаемые браузеры: Chrome, Brave и Samsung Internet на Android.

Значок 32 × 32 пикселя для устаревших браузеров. Он должен находиться в корне вашего веб-сайта.

Большинство современных браузеров поддерживают значки SVG. Преимущества favicon.svg в том, что он выглядит лучше при масштабировании, потому что это векторное, а не растровое изображение, и мы можем добавлять HTML и CSS в SVG, что означает, что мы можем поддерживать темный режим.

Фавикон на моем сайте в светлом режиме.

Фавикон на моем сайте в тёмном режиме.

Значок 180 × 180 пикселей устройства Apple будут использовать, если вы добавите страницу на главный экран.

Используйте элемент canonical ссылки, чтобы предотвратить проблемы SEO, вызванные дублированием контента, указав исходный источник для страниц, доступных по нескольким URL-адресам.

Это не абсолютный минимум, но это то, что мне нужно на большинстве сайтов, которые я создаю. Подводя итог, я добавил к этому сообщению несколько тегов, которые нам, вероятно, больше не нужны, а также некоторые другие, которые могут вам понадобиться время от времени. Если вы хотите узнать больше об элементе head и его дочерних элементах, ознакомьтесь с фантастическим репозиторием HEAD Джоша Бучи.

Штуковины, которые нам больше не нужны

По словам Андрея Ситника, для последних версий Windows этого больше не требуется.

Начиная с IE11, режимы документов устарели и больше не должны использоваться, кроме как на временной основе.

Начиная с IE11, режим Edge является предпочтительным режимом документа; он представляет собой высочайшую поддержку современных стандартов, доступных для браузера.

Начиная с Safari 12, нам больше не нужен отдельный вариант значка для закрепленных вкладок.

Другие примечательные элементы

RSS-канал для вашего сайта.

Отключите автоматическое определение и форматирование телефонных номеров.

Запретите Twitter использовать информацию о вашем сайте в целях персонализации.

Облачные серверы от Маклауд быстрые и безопасные.

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

Источник

Документ HTML

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

Элементы в HTML-документе представлены семейством объекта document. Доступ к содержанию документа возможен посредством данных элементов и объекта TextRange. Оба метода позволяют обращаться к содержанию документа и изменять его. Стиль документа представлен семейством styleSheets, обеспечивающим доступ к таблицам глобальных и связанных стилей, которые связаны с документом.

Обсуждение этих вопросов будет проведено в нескольких главах. В данной главе рассматриваются следующие вопросы:

Ссылка на объект document. Объект document является свойством окна. Показано, как получить доступ к HTML-документу, находящемуся в текущем окне, а также к документам, которые отображаются в других окнах.

Изменение цветов документа. Объект document содержит свойства для манипулирования цветом текста и фона на странице. Данные свойства совместимы с реализацией объектной модели в Netscape Navigator и Internet Explorer 3.0.

Доступ к метаинформации о документе. Информация, извлекаемая во время загрузки документа, используется в объектной модели. Эта мета-информация включает исходный размер документа, дату создания файла и его последнего изменения. Кроме того, могут быть извлечены или назначены все cookie, которые связаны с документом.

Изменение потока HTML. Объект document предоставляет методы манипулирования потоком HTML во время загрузки страницы. Эти методы работают только во время воспроизведения страницы на экране. Для изменения страницы после загрузки используются отдельные объекты и методы.

На рис. 6.1 показан объект document и семейства, которые содержатся внутри объекта. Рядом с названием семейства указан тег для содержащихся в нем HTML-элементов.

Рис. 6.1. Семейства и соответствующие HTML-элементы объекта document

Ссылка на объект document

На объект document можно сослаться как на свойство объекта window (окно). Если вы ссылаетесь на документ без указания окна, в котором находится документ, то будет установлена ссылка на текущий документ. В приведенных ниже примерах даны ссылки на документ для получения его названия:

Ссылка MyPlace в данном примере должна быть ссылкой на окно, которое возвращается методом open или именем фрейма в текущей иерархии набора фреймов.

Независимо от того, содержит ли текущее окно набор фреймов или HTML-документ, объект document представлен полностью. По соображениям безопасности некоторые свойства могут быть недоступны для других доменов. Например, содержание документа доступно для страниц, которые совместно используют домен документа.

Изменение цветов документа

Одной из самых простых операций, которую можно выполнить с документом, является изменение цветов фона и текста. Объект document представляет свойства, которые определяют цвета фона, текста и ссылок.

В документе доступны следующие свойства цвета: alinkColor, bgColor, fgColor, linkColor и vlinkColor. Свойство bgColor управляет цветом фона документа, а свойство fgColor управляет цветом текста по умолчанию.

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

Таблица 6.1. Свойства цвета и атрибуты тега

Действительные значения цветов

Все свойства цвета, включая представленные в элементах, принимают в качестве значения символьную строку, представляющую имя цвета или шестнадцатеричное значение RGB. Список действительных имен строк и их шестнадцатеричных эквивалентов можно найти на прилагаемом компакт-диске. Шестнадцатеричные значения RGB указываются в следующем формате:

Если вы обращаетесь к значению одного из этих свойств в документе или элементе HTML, то всегда получаете шестнадцатеричное значение, даже если первоначально указали название цвета. Например, установка свойства Red для строки возвращает значение #FFOOOO. Однако свойства CSS (каскадных таблиц стилей) оставляют введенные значения без изменений, так что при установке свойства стиля red возвращается значение red.

Выбор цвета

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

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

В приведенном выше коде содержится только часть доступных цветов, но выбор может быть легко расширен путем простого добавления дополнительных ячеек в таблицы цветов фона или цветов текста.

Отражение атрибутов HTML как свойств

Атрибуты всех элементов HTML в документе представлены как свойства в объектной модели. Вы можете установить значение атрибута в теге HTML или установить значение соответствующего свойства. Если выполнить оба действия, то отображение на экране будет соответствовать установкам сценария. Например, сценарий в приведенном ниже коде устанавливает цвет фона равным Red (красный), и последующая установка значения Blue (голубой) для соответствующего атрибута в теге не сможет изменить выбранный цвет:

Доступ к метаинформации о документе

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

Документ также представляет информацию о cookie клиента. Cookie являются отчасти спорным элементом, поскольку они позволяют Web-узлу сохранять небольшие фрагменты информации на клиентской машине, к которым впоследствии узел может обращаться и обновлять их. Данная информация ограничена в том смысле, что доступ к данным имеют только те узлы, которые создали эти данные.

В документе также содержится информация о состоянии всех внедренных объектов, включая информацию о том, закончена ли загрузка документа или объекта. Эта информация необходима при написании сценариев, которые могут выполняться до того, как страница станет доступна пользователю.

Размер файла

Документ представляет свойство fileSize, которое возвращает исходный размер документа в килобайтах. Возвращаемое значение представляет число байт в файле, который был загружен и не отражает изменений, которые могли быть внесены сценариями в документ.

Заголовок

Значение свойства title документа устанавливается в элементе Head следующим образом:

Заголовок содержит стандартный текст. Он не может содержать элементы HTML. Свойство документа title возвращает содержание элемента Title как строкy. Вы можете назначить новое значение данной строке для изменения названия, отображаемого в строке заголовка. В операционных системах с поддержкой окон этот заголовок, как правило, является заголовком окна.

Примечание: Netscape Navigator 3.0 и Internet Explorer 3.0 генерируют ошибку, когда страница пытается присвоить значение свойству title. Internet Explorer 4.0 устанавливает данное свойство доступным для чтения/записи.

Местоположение источника

Свойство location окна подробно обсуждается в главе 4.

Свойство документа URL является псевдонимом для свойства href в объекте location. Свойство URL используется для обеспечения совместимости с ранними версиями браузеров. Свойство location окна или документа используется для определения и изменения отображаемой в данный момент страницы.

Для любого документа могут быть указаны три даты: дата создания документа, дата последнего обновления документа автором и дата последней загрузки документа в кэш. Эта информация представлена в документе посредст-вом следующих свойств:

Значение свойства fileCreatedDate (дата создания файла) очевидно из его названия. Остальные свойства обсуждаются в следующих разделах данной главы.

Свойства fileModifiedDate и lastModified

Свойства fileModifiedDate и lastModified содержат дату последнего изменения документа и могут быть использованы совместно со свойством cookie, чтобы определить, не был ли документ изменен с момента его последнего посещения пользователем. Internet Explorer 3.0 и Netscape Navigator поддерживают свойство lastModified, но они не поддерживают свойство fileModifiedDate. Internet Explorer 4.0 поддерживает новое свойство для обеспечения совместимости с другой метаинформацией, которая была введена в динамический HTML.

Приведенный ниже код выводит дату последнего изменения файла:

Метод write используется для записи в поток документа во время загрузки страницы. Данный метод весьма подробно обсуждается ниже в разделе «Запись кода HTML в поток» этой главы.

В ходе работы в сети файлы кэшируются на локальной машине пользователя. Свойство fileUpdatedDate возвращает дату последнего обновления файла сервером. Используя данное свойство можно написать код, уведомляющий пользователя о том, что просматриваемая страница находится в кэше дольше установленного периода времени:

Тип MIME

Свойство mimeType возвращает MIME-ТИП документа. Для всех HTML-документов (включая наборы фреймов) свойство mimeType возвращает значение Internet Document (HTML).

Cookies

HTML-страница имеет возможность сохранить небольшие объемы информации в специальном файле на клиентской машине. Данная информация называется cookie. Многие пользователи считают, что cookie представляет потенциальную опасность, так как позволяют странице записывать информацию на жесткий диск клиентской машины. Браузеры дают возможность отключить эту возможность. По этой причине не следует создавать Web-страницы, предполагая доступность cookie. Однако cookie полезны для ведения информации о состоянии, которая используется многими страницами на данном узле.

В данном разделе будет показано, как использовать cookie и обеспечивать функции помощи для манипулирования ими. В конце раздела приведен пример, демонстрирующий использование cookie для создания счетчика посещений на клиентской стороне.

Примечание: Internet Explorer 3.0 не разрешает модифицировать cookie, если доступ к странице был осуществлен посредством протокола file:. Это ограничение было снято в Internet Explorer 4.0.

Чтение свойства cookie

С одним документом или доменом может быть связано несколько свойств cookie. При чтении свойства cookie возвращается список, содержащий разделенные точкой с запятой пары имя-значение. Поэтому требуется процедура, которая будет анализировать список cookie. JavaScript представляет некоторые методы простого разделения подобных списков на массивы. Приведенная ниже функция анализирует строку cookie и возвращает ее в виде массива, содержащего пары имя-значение:

Приведенный ниже код демонстрирует, как использовать массив cookie, вращаемый функцией parseCookie ():

Пары имя-значение, которые вы назначаете cookie, не могут содержать пробелов, запятых и точек с запятой. Все эти символы должны быть заменены на соответствующие escape-последовательности. JavaScript использует две функции, которые обрабатывают escape-последовательности: функция escape служит для замены символов на escape-последовательности в строке до ее назначения определенному cookie, а функция unescape используется для выполнения обратной операции при извлечении cookie.

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

Запись свойства cookie

Значение свойства cookie представляет собой строковое значение в следующем формате:

Пара имя-значение является единственным необходимым параметром при назначении информации cookie. Имя может быть любой действительной строкой, с которой связано значение. Указание пары имя-значение без какой-либо дополнительной информации создает cookie, который сохраняется только в течение текущего сеанса браузера. Приведенный ниже код создает простой файл cookie, содержащий время и дату загрузки страницы:

Дата окончания срока хранения cookie должна быть определена в системе времени по Гринвичу (GMT) в приведенном ниже формате:

Ниже приведен пример даты в требуемом формате:

В JavaScript простейшим способом преобразования в формат GMT является использование метода toGMTString, представленного объектом Date.

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

По умолчанию все файлы cookie сохраняются с указанием пути и домена, даже если данные значения явно не определены. Таким образом поддерживается безопасность для cookie. Доступ к cookie можно получить только с указанием пути и домена, в котором был создан cookie. Более того, при создании cookie вы не можете указать произвольный домен. Данное ограничение исключает возможность передачи секретной информации из одного домена в другой. Однако несколько страниц из данного домена могут совместно использовать один файл cookie.

Cookie могут использоваться для создания индивидуальных страниц для пользователя. Приведенный ниже код показывает, как использовать cookie для учета числа посещений пользователем Web-страницы. Данный код использует функцию parseСookie, которая была рассмотрена ранее.

Родительское окно

Точно так же, как вы перемещаетесь из окна в документ, вы можете возвращаться из документа в содержащее его окно. Окно, содержащее документ, представлено посредством свойства parentWindow. Данное свойство полезно при определении объекта-контейнера, когда доступен только объект document.

Для доступа к окну из документа можно использовать два дополнительных свойства: Script и frames. Свойство Script представлено для обратной совместимости с Internet Explorer 3.0 и больше не должно использоваться. Свойство frames возвращает семейство встроенных фреймов в документе. Это семейство frames возвращает окно, поскольку оно является псевдонимом семейства frames окна, которое в свою очередь является псевдонимом объекта window.

Манипулирование семействами подробно обсуждается в главе 7.

Для прояснения взаимоотношений между данными свойствами приведенный ниже код демонстрирует несколько способов возвращения объекта window:

Доступность документа

В процессе загрузки документ или внедренный объект проходят через четыре стадии: не инициализирован (uninitialized), загружается (loading), интерактивный (interactive) и загрузка завершена (complete). Свойство объекта readyState содержит текущее состояние объекта. Когда объект изменяет состояние, генерируется событие onreadystatechange. Используя данные инструменты в сценариях, можно установить поведение страницы в соответствии с четырьмя стадиями загрузки документа и внедренных объектов, а также определить реакцию на изменения в процессе загрузки. Наиболее важно то, что программа может не обращаться к не полностью загруженным объектам.

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

Таблица 6.2. Стадии загрузки документа

Когда начинается загрузка документа, документ сразу же переходит в состояние загрузки. Переход в интерактивное состояние наступает, когда браузер встречает первый элемент Script, Body или Frameset. Документ переходит в завершенное состояние, когда весь документ проанализирован и загружены все внедренные объекты.

Свойство документа readyState содержит строку текущего состояния документа. Каждый внедренный объект имеет собственное свойство readyState, второе отражает его состояние.

Поскольку документ перейдет в интерактивное состояние после запуска какого-либо сценария, то сценарии документа могут получить только два значения свойства readyState: interactive и complete. Сценарий в другом фрейме или окне может получить значение loading. Это произойдет, если сценарий обратится к свойству документа readyState в ходе анализа элемента Head документа и перед обнаружением сценариев в элементе Head. Любой сценарий может получить одно из четырех значений readyState внедренного объекта.

Обработчики событий JavaScript захватываются асинхронно в ходе анализа страницы. Такой обработчик может выполняться перед тем, как вся страница будет загружена. Если обработчик выполняет операции, которые требуют, чтобы страница была полностью загружена, то обработчик может проверить значение свойства документа readystate перед продолжением обработки, как показано в приведенном ниже примере:

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

Событие onreadystatechange возникает, когда изменяется состояние документа или внедренных объектов. Данное событие может генерироваться большое число раз в ходе загрузки документа или элемента.

Внедренные объекты в документе также запускают событие onreadystatechange. Например, элементы Object и IMG генерируют событие onreadystatechange. Для данных элементов программа может получить событие во время нескольких переходов состояния, в зависимости от того, когда был использован обработчик событий. В целом, однако, не следует писать программы, которые зависят от переходов в любое состояние, за исключением перехода в состояние завершения.

Модификация потока HTML

Первоначально объектная модель в Internet Explorer 3.0 не позволяла изменять содержание документа после воспроизведения страницы. С тех пор был представлен ряд методов для вывода HTML в потоке документа во время загрузки страницы или для генерации совершенно нового HTML-документа в другом фрейме или экземпляре браузера.

Пример, приведенный выше в данной главе, который выводит дату последнего изменения исходного файла, показывает, как добавлять HTML в поток загружаемого документа. Пример в главе 5, который создает диаграмму иерархии набора фреймов документа, поясняет процедуру генерации завершенных документов.

Методы добавления содержания в поток HTML в ходе его анализа и для генерации завершенных документов, перечислены ниже:

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

Примечание: Одним из нововведений в динамическом HTML является способность модифицировать содержание документа после его загрузки. Вы можете модифицировать документ, используя свойства и методы элемента Body и его дочерних элементов, или используя новый объект по имени TextRange. Изменение содержания документа подробно обсуждается в части IV.

Если вы знакомы с маркированными разделами (marked sections) SGML, то увидите, что сценарии, которые осуществляют запись в поток HTML, сходны с ними. Маркированные разделы позволяют браузеру использовать различное содержание, в зависимости от определенного условия. Например, апплет Java, дополнительный модуль или изображение могут быть выведены на экран в зависимости от поддержки данного элемента браузером. Однако генерация содержания с помощью сценариев имеет существенный недостаток, связанный с тем, что содержание документа не может быть предопределено и индексировано с помощью инструментов без оценки сценариев на странице.

Запись HTML в поток

Методы write и writeln позволяют записывать код HTML в текущий поток во время загрузки документа или в другой поток, который был открыт с использованием метода open. В данной книге метод write используется в довольно редких случаях для вывода кода HTML в поток во время загрузки страницы. Аргументы, передаваемые методу write, всегда конвертируются в строки перед тем, как они будут выведены в документе.

Метод writeln сходен с методом write, но он присоединяет символ конца строки к концу строки. Чаще всего не имеет значения, какой используется метод, write или writeln, поскольку символы конца строки игнорируются в потоке HTML. Символы конца строки и пробелы имеют значение только в трех случаях:

В элементах PRE и ХМР, в которых остаются символы конца строки.

В элементах, которые не содержат HTML, таких как Script и Style.

В потоках в MIME-типе, отличном от HTML.

Не следует использовать методы write и writeln в текущем документе после окончания загрузки документа, если только вначале не был вызван метод open, который очищает текущее окно документа и удаляет все переменные.

Создание документов с помощью методов open и close

Методы open и close документа позволяют создавать новые документы в других фреймах или окнах. Данные документы даже не должны быть написаны на HTML, поскольку метод open принимает в качестве аргумента идентификатор MIME-типа. Поэтому если известен формат изображения или другой тип документа, то изображение или тип документа могут быть выведены прямо в окне.

Приведенный ниже код демонстрирует использование методов open и close для вывода информации документа определенного окна в другом окне:

Примечание: Метод clear был представлен в Internet Explorer 3.0 для удаления содержания документа. Данный метод больше не используется, его поддержка в будущем сомнительна, и он ведет себя непредсказуемо в различных браузерах. Для удаления и генерации новых документов применяются методы open и close.

Запись сценариев в поток

Сценарий может вставлять дополнительные сценарии в поток. При использовании данного метода следует быть осторожным при закрытии сценарием элемента Script, в который производится вставка. Сценарий должен вставить тег как две связанные строки, как показано в приведенном ниже коде. В противном случае анализатор HTML будет считать, что тег завершает сценарий, который вы пишете, а не вставляемый сценарий.

Источник