Динамическая генерация веб-страниц средствами 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>
- Введение
- 2. Основы сетевых технологий
- Применение компьютерных сетей
- Классификация компьютерных сетей
- Беспроводные сети
- Широковещательные сети и сети с передачей от узла к узлу
- Локальные сети
- Муниципальные сети
- Глобальные сети и интерсети
- 3. Принципы построения сетевых протоколов Иерархия сетевых протоколов
- Метафора «философ – переводчик – секретарь»
- Пример пятиуровневого протокола
- 4. Arpanet и возникновение интернет
- 5. Топология internet
- 6. Маршрутизация
- Маршрутизация в сетях на основе служб без установления соединения
- Маршрутизация в сетях на основе служб с установлением соединения
- 8. Служба доменных имен (dns)
- 9. Электронная почта
- 11. Введение в web-технологии
- Структура html-документа
- Теги заголовков и абзацев
- Маркированные списки
- Нумерованные списки
- Списки определений
- Вложенные списки
- Гиперссылки
- Использование рисунков в роли ссылок
- Карты изображений
- Основы JavaScript
- Управляющие структуры JavaScript
- 15. Введение в объектно-ориентированное программирование Основные понятия объектно-ориентированного программирования: инкапсуляция, наследование и полиморфизм
- Объектно-ориентированные, объектные и объектно-базированные языки программирования
- Избранная библиография по объектно-ориентрованному программированию
- Представление документа в виде древовидной структуры
- Навигация по документу
- Динамическая генерация веб-страниц средствами dhtml на основе dom
- Модель событий dom
- 17. Архитектура распределенной системы структурно-параметрического синтеза
- 18. Заключение
- Оглавление