Введение в динамический HTML

Статья
10/20/2021

Введение в динамический HTML

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

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

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

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

Одним словом, динамический HTML устраняет недостатки статических страниц. Разработчики могут создавать веб-сайты с новыми функциональными возможностями как в Интернете, так и в интрасети без ущерба для производительности. Динамический HTMLпозволяет не только улучшить восприятие документа пользователем, но и повысить производительность сервера за счет уменьшения числа запросов к серверу.

В следующих разделах приведено более подробное описание динамического HTML и даны практические примеры его использования.

Модель DOM
Динамические стили
Динамический контент
Позиционирование и анимация
Фильтры и переходы
Загрузка шрифтов
Привязка данных
Выводы
Связанные разделы

Модель DOM

Динамический HTML — это не самостоятельная технология, а продукт трех взаимосвязанных и взаимодополняющих технологий: HTML, спецификации каскадных таблиц стилей (CSS) и сценариев. Чтобы разрешить сценариям и компонентам доступ к функциям HTML и каскадным таблицам стилей, контент документа представляется в виде объектов модели программирования, называемой моделью DOM.

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

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

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

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

Динамические стили

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

Объектная модель обеспечивает программный доступ к стилям. Это означает, что для изменения встроенных стилей отдельных элементов и правил стилей можно использовать сценарии. Для создания сценариев можно использовать JavaScript, Microsoft JScript или язык сценариев Microsoft Visual Basic Scripting Edition (VBScript).

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

Пример 1

<html>

<head>

<title>Динамические стили</title>

function doChanges(e) {

e.style.color = "green";

e.style.fontSize = "20px";

}

</script>

</head>

<body>

<h3 onmouseover="doChanges(this)" style="color:black;font-size:18px">Добро пожаловать в динамический HTML!</h3>

<p>Большие возможности с меньшими усилиями.</p>

</body>

</html>

Пример кода: Пример 1

В примере 1 выполняются следующие действия.

Элемент HTML. В этом примере целевым элементом является тег H3.
Встроенный стиль. Сначала элемент отображается черным цветом с размером шрифта 18 пкс.
Атрибут события. Атрибут onmouseover определяет действие, которое выполняется при наведении указателя мыши на элемент.
Обработчик события. Функция, которая соответствует событию, объявленному в элементе head документа. Объект DHTML, представляющий конечный элемент, передается в качестве параметра функции с помощью указателя this.
Объект style. Объект style содержит сведения, которые были заданы во встроенном стиле при определении элемента. Чтобы изменить цвет и размер шрифта, функция изменяет свойства color и fontSize элемента. Для отображения новых значений атрибутов веб-браузер сразу же обновляет текст на странице.

Пример 2

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

<html>

<head>

<title>Динамические стили</title>

function showMe() {

MyHeading.style.color = "red";

MyList.style.display = "";

}

</script>

</head>

<h3 id="MyHeading">Добро пожаловать в динамический HTML!</h3>

<p>Большие возможности с меньшими усилиями. Щелкни и смотри!</p>

<li>Изменение цвета, размера и шрифта текста.</li>

<li>Отображение и скрытие текста.</li>

<li>И многое другое.</li>

</ul>

<p>И это только начало!</p>

</body>

</html>

Пример кода: Пример 2

Замечания по примеру 2.

Изначально атрибут display списка имеет значение none. Это значение используется для скрытия списка.
Атрибут события onclick задан в элементе body. Чтобы инициировать событие, пользователю достаточно щелкнуть в любом месте страницы.
Для вызова конечных элементов обработчик событий использует атрибут id и удаляет значение свойства display. Контент, расположенный ниже списка, мгновенно сдвигается вниз.

Примечание. Если веб-браузер Windows Internet Explorer обнаруживает тег, определяющий атрибут id или name, он создает ссылку на этот тег в глобальной области, чтобы сценарий смог быстро найти его. Однако это не является стандартным поведением. Чтобы динамический HTML поддерживал все веб-браузеры, для поиска конечных элементов используйте метод getElementById.

Список разделов с подробным описанием и примерами использования динамических стилей см. в разделе Введение в динамические стили. Динамические стили основаны на рекомендациях консорциума W3C для каскадных таблиц стилей (CSS) для статических таблиц стилей.

Динамический контент

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

Если для просмотра страниц используется веб-браузер, который не поддерживает динамический HTML, возможно, некоторые динамические и интерактивные функции будут недоступны. Поскольку динамический HTML широко распространен, пользователи могут просматривать страницы как с помощью Internet Explorer, так и с помощью любого другого веб-браузера. Однако для того чтобы контент был доступен в веб-браузерах, поддерживающих меньшее число функций, необходимо придерживаться некоторых основных принципов (например, создание страницы с "корректно ухудшающимися" функциональными возможностями).

Нестандартный пример

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

<html>

<head><title>Динамический контент</title>

function changeMe() {

MyHeading.outerHTML = "<H1 ID=MyHeading>Динамический HTML!</H1>";

MyHeading.style.color = "green";

MyText.innerText = "Большие возможности с меньшими усилиями.";

MyText.align = "center";

document.body.insertAdjacentHTML("BeforeEnd", "<P ALIGN=\"center\">Попробуйте!</P>");

}

</script>

</head>

<h3 id="MyHeading">Добро пожаловать в динамический HTML!</h3>

<p id="MyText">Щелкните левой кнопкой мыши в любой области страницы.</p>

</body>

</html>

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

Заменяет элемент H3 на элемент H1 с помощью свойства outerHTML.
Изменяет текст абзаца с помощью свойства innerText.
Вставляет новый абзац в конец документа с помощью метода insertAdjacentHTML.

Стандартные методы модели DOM

Модель программирования DOM была разработана для динамического доступа и обновления контента, структуры и стиля документов любого типа. Для реализации этих возможностей модель DOM представляет иерархию документа в виде дерева узлов. Каждый узел может быть описан в терминах предков и потомков. В зависимости от расположения в иерархии узел может иметь дочерние и (или) родительские узлы, а также узлы того же уровня.

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

Метод	Описание
createElement	Создает новый элемент (узел) указанного типа.
createTextNode	Создает новый текстовый узел (не HTML).
appendChild	Добавляет узел в конец списка дочерних элементов.
insertBefore	Добавляет узел в документ в качестве дочернего узла по отношению к родительскому узлу.
replaceChild	Заменяет существующий дочерний элемент новым дочерним элементом.

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

Предупреждение системы безопасности. Если при использовании свойства innerHTML для изменения части страниц не полностью контролируется текст, риск атак путем внедрения сценария существенно повышается. Если текст получен от недоверенного источника (например, строка запроса в URL-адресе), для преобразования кода HTML в текст используйте метод createTextNode. Дополнительные сведения см. в справке по свойству innerHTML.

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

<html>

<head><title>Динамический контент</title>

function changeMe() {

// Замена свойства outerHTML методами createElement и replaceChild.

var oChild = document.getElementById("MyHeading");

var oNewChild = document.createElement('H1');

oNewChild.id = oChild.id;

oNewChild.innerHTML = "Динамический HTML!";

oNewChild.style.color = "green";

oChild.parentNode.replaceChild(oNewChild,oChild)

// Замена innerText на innerHTML.

MyText.innerHTML = "Большие возможности с меньшими усилиями.";

MyText.align = "center";

// Замена метода insertAdjacentHTML("BeforeEnd") на appendChild.

var oPara = document.createElement('P');

oPara.innerHTML = "Попробуйте!"

oPara.align = "center";

document.body.appendChild(oPara);

}

</script>

</head>

<h3 id="MyHeading">Добро пожаловать в динамический HTML!</h3>

<p id="MyText">Щелкните левой кнопкой мыши в любой области страницы.</p>

</body>

</html>

Пример кода: Пример 3

Число строк в примере 3 больше, чем в предыдущем примере, однако этот код работает в большинстве веб-браузеров, имеющихся на данный момент. Основные рекомендации:

Для обнаружения элементов используйте метод getElementById.
Для создания новых экземпляров объектов HTML, добавляемых в документ, используйте метод createElement.
Для работы с моделью DOM используйте стандартные методы, например appendChild и replaceChild.
Вместо свойства innerText используйте innerHTML.

Список разделов с подробным описанием и примерами использования динамического контента см. в разделе Дополнительные сведения о динамическом контенте.

Позиционирование и анимация

Позиционирование — это размещение элементов HTML на странице с помощью координат, задаваемых относительно другого элемента или границ окна веб-браузера. Для размещения таких элементов, как изображения, элементы управления и текст с точно заданными координатами, можно использовать атрибуты top и left. Чтобы определить порядок расположения перекрывающихся элементов, используйте атрибут z-index.

Для позиционирования элементов можно использовать одно из следующих ключевых слов:

Ключевое слово	Описание
absolute	Элемент удаляется из потока документов и позиционируется относительно его контейнера.
relative	Элемент смещен относительно его контейнера, однако пространство элемента, которое он занимал бы в документе, сохраняется.
fixed	Веб-браузер Internet Explorer версии 7 и более поздней версии. Элемент позиционируется как в случае абсолютного позиционирования, однако позиционирование осуществляется относительно окна веб-браузера, а не документа.

Позиционирование с помощью каскадных таблиц стилей

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

<html>

<head>

<title>Позиционирование</title>

</head>

<body>

<h3>Добро пожаловать в динамический HTML!</h3>

<p>Позиционирование позволяет точно задать координаты изображения,

включая случаи размещения изображения за текстом и другими изображениями.</P>

</body>

</html>

Пример кода: Пример 4

В примере 4 выполняются следующие действия.

Для размещения изображения в верхнем левом углу атрибутам top и left присваивается значение 0.
Для размещения изображения за текстом атрибуту z-index присваивается значение -1.

Позиционирование с помощью сценариев

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

<html>

<head>

<title>Динамическое позиционирование</title>

var id;

function StartGlide()

{

Banner.style.pixelLeft = document.body.offsetWidth;

Banner.style.visibility = "visible";

id = window.setInterval(Glide,50);

}

function Glide()

{

Banner.style.pixelLeft -= 10;

if (Banner.style.pixelLeft <= 0) {

Banner.style.pixelLeft = 0;

window.clearInterval(id);

}

</script>

</head>

<h3>Добро пожаловать в динамический HTML!</h3>

<p>Динамическое позиционирование позволяет перемещать изображения в любую область документа,

даже если документ просматривается пользователем.</p>

</body>

</html>

Пример кода: Пример 5

В примере 5 выполняются следующие действия.

Изображение с абсолютным позиционированием изначально скрыто (атрибут visibility имеет значение hidden).
Функция StartGlide выводит изображение, размещает изображение у правого края страницы и вызывает функцию Glide с интервалом в 50 мс.
Функция Glide перемещает изображение влево с шагом 10 пкс. Когда изображение достигнет левого края страницы, интервал обнуляется.

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

Фильтры и переходы

Веб-браузер Internet Explorer поддерживает расширяемую архитектуру, которая позволяет указать фильтры и переходы с помощью свойств каскадных таблиц стилей. Для применения визуальных эффектов к элементам можно использовать визуальные фильтры (в этом случае сценарии не требуются). Синтаксис использования фильтров:

filter:имя_фильтра( параметр1, параметр2, ...)

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

Пример кода: Демонстрация переходов

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

Пример кода: Демонстрация фильтров

Дополнительные сведения см. в разделе Введение в фильтры и переходы.

Загрузка шрифтов

Веб-браузер Internet Explorer поддерживает динамическую загрузку шрифтов, используемых на веб-странице. С помощью правила стиля @font-face в документе можно создать ссылку на шрифт, который загружается автоматически и используется только на странице (если страница закрыта, шрифт нигде не используется). Чтобы встроить шрифты в Internet Explorer, необходимо преобразовать символы шрифта TrueType в шрифт Microsoft OpenType с помощью средства Microsoft Web Embedding Fonts Tool (WEFT). Использование загруженных шрифтов показано в следующем примере кода.

@font-face {

font-family:Comic;

src:url(http://example.com/fonts/comicbold.eot);

}

</style>

</head>

<body>

<p style="font-family:Comic;font-size:18pt">Эта строка использует элемент стиля @font-face

для отображения текста с помощью полужирного шрифта Comic Sans MS

размером 18 пт.</p>

</body></html>

В этом примере выполняются следующие действия.

Правило стиля @font-face объявляет новый атрибут font-family и задает расположение для загрузки шрифтов.
Затем font-family используется для задания стиля элемента с помощью пользовательского шрифта.

Привязка данных

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

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

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

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

Чтобы обеспечить привязку данных в документах, необходимо добавить объект источника данных (DSO) в документ. Этот невидимый объект является элементом управления ActiveX или Java-приложением, которое знает, как взаимодействовать с источником данных. В следующем примере показано, как привязать таблицу к объекту источника данных (DSO). В этом примере все записи из файла с разделителями-запятыми sampdata.csv отображаются в наглядной таблице.

<html>

<head><title>Пример DataURL</title></head>

<body>

</object>

<tbody>

<tr>

</tbody>

</table>

</body>

</html>

Пример кода: Привязка CSV-файла к таблице

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

Создает экземпляр объекта источника данных и загружает набор данных с помощью тега OBJECT.
Привязывает источник данных с помощью атрибута DATASRC элемента table.
Связывает поля в наборе записей с атрибутами DATAFLD для каждой ячейки таблицы. Для каждой записи строки внутри элемента TBODY повторяются.

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

Выводы

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

Связанные разделы

Дополнительные ресурсы