- •7.1.1.Основные понятия.
- •7.1.2.Модели взаимодействия клиент-сервер.
- •7.1.3.Мониторы транзакций.
- •Каскадирование
- •Специфичность
- •Клиентские языки
- •Серверные языки
- •Хронология Шаблоны программирования
- •Примечания
- •Способы добавления стилей на страницу
- •Связанные стили
- •Глобальные стили
- •Внутренние стили
- •Импорт css
- •Представление документа в виде древовидной структуры
- •Навигация по документу
- •Навигационные атрибуты объекта Node
- •Динамическая генерация веб-страниц средствами dhtml на основе dom
- •Методы объекта Document, позволяющие создавать объекты
- •Методы объекта Node, добавляющие и удаляющие элементы документа
- •Методы объекта Element
- •Модель событий dom
- •Свойства объекта event
- •Свойства объекта mouse
- •Встраивание кода JavaScript в документ html
Динамическая генерация веб-страниц средствами dhtml на основе dom
Иногда требуется динамически формировать веб-страницы, например, в случае создания чатов, форумов, либо динамически создаваемых веб-страниц, содержимое которых хранится в базе данных. DOM позволяет решить такую задачу.
Для создания объектов у объекта Document имеются следующие методы (табл. 12):
Таблица 12
Методы объекта Document, позволяющие создавать объекты
МетодОписание
createElement(имя_элемента)
Создает новый узел элемента с указанным именем
createTextNode(текст)
Создает текстовый узел с указанным текстом
createAttribute(имя_атрибута)
Создает новый узел атрибута с указанным именем
Вновь созданные объекты добавляются в структуру документа при помощи методов объекта Node (табл. 13):
Таблица 13
Методы объекта Node, добавляющие и удаляющие элементы документа
МетодОписание
appendChild(новый_узел)
Добавляет объект Node в конец списка узлов-потомков
cloneNode(потомок-опция)
Создает объект Node, идентичный указанному в аргументе. В качестве аргумента можно использовать и все узлы-потомки одновременно
hasChildNodes()
Возвращает true, если узел имеет потомков
insertBefore(новый_узел, текущий_узел)
Вставляет объект Node в список потомков перед узлом, указанным в качестве второго параметра
removeChild(узел-потомок)
Удаляет узел-потомок, указанный в качестве параметра
replaceChild(новый_потомок, старый_потомок)
Заменяет старого потомка на нового
Приведем пример динамической генерации документа средствами DOM (рис. 21).
Рис. 21. Динамически сгенерированная веб-страница
<html> <head> <title>Пример динамической генерации документа</title> </head> <body> <script language = "JavaScript"> var newText; var newElem; newText = document.createTextNode("Пример динмического создания HTML-документа"); newElem = document.createElement("H1"); newElem.appendChild(newText); document.body.appendChild(newElem); newText = document.createTextNode("Абзац"); newElem = document.createElement("P"); newElem.appendChild(newText); document.body.appendChild(newElem); </script> </body> </html>
Для чтения и установки атрибутов используются следующие методы объекта Element (табл. 14).
Таблица 14
Методы объекта Element
МетодОписание
getAttribute(имя_атрибута)
Возвращает значение атрибута
setAttribute(имя_атрибута, значение)
Устанавливает значение атрибута
removeAttribute(имя_атрибута)
Устанавливает значение атрибута по умолчанию, затирая текущее значение
Ниже приведен пример на задание атрибутов. И хотя применение атрибутов физического форматирования не рекомендовано к применению (для этих целей используются стили), они были выбраны в качестве примера, так как наглядно демонстрируют идею задания атрибутов методами DOM.
<html> <head> <title>Пример динамического создания HTML-документа</title> </head> <body> <script language = "JavaScript"> var newText; var newElem; newText = document.createTextNode("Пример динамического создания HTML-документа"); newElem = document.createElement("H1"); newElem.appendChild(newText); newElem.setAttribute("align", "center"); document.body.appendChild(newElem); alert(newElem.getAttribute("align")); newText = document.createTextNode("Абзац"); newElem = document.createElement("P"); newElem.appendChild(newText); newElem.setAttribute("align", "right"); document.body.appendChild(newElem); alert(newElem.getAttribute("align")); newElem.removeAttribute("align"); </script> </body> </html>