- •Введение
- •2. Основы сетевых технологий
- •Применение компьютерных сетей
- •Классификация компьютерных сетей
- •Беспроводные сети
- •Широковещательные сети и сети с передачей от узла к узлу
- •Локальные сети
- •Муниципальные сети
- •Глобальные сети и интерсети
- •3. Принципы построения сетевых протоколов Иерархия сетевых протоколов
- •Метафора «философ – переводчик – секретарь»
- •Пример пятиуровневого протокола
- •4. Arpanet и возникновение интернет
- •5. Топология internet
- •6. Маршрутизация
- •Маршрутизация в сетях на основе служб без установления соединения
- •Маршрутизация в сетях на основе служб с установлением соединения
- •8. Служба доменных имен (dns)
- •9. Электронная почта
- •11. Введение в web-технологии
- •Структура html-документа
- •Теги заголовков и абзацев
- •Маркированные списки
- •Нумерованные списки
- •Списки определений
- •Вложенные списки
- •Гиперссылки
- •Использование рисунков в роли ссылок
- •Карты изображений
- •Основы JavaScript
- •Управляющие структуры JavaScript
- •15. Введение в объектно-ориентированное программирование Основные понятия объектно-ориентированного программирования: инкапсуляция, наследование и полиморфизм
- •Объектно-ориентированные, объектные и объектно-базированные языки программирования
- •Избранная библиография по объектно-ориентрованному программированию
- •Представление документа в виде древовидной структуры
- •Навигация по документу
- •Динамическая генерация веб-страниц средствами dhtml на основе dom
- •Модель событий dom
- •17. Архитектура распределенной системы структурно-параметрического синтеза
- •18. Заключение
- •Оглавление
Представление документа в виде древовидной структуры
В DOM документ представляется в виде древовидной структуры (рис. 19), являющейся одной из наиболее употребительных структур в программировании. Это обеспечивает унифицированный способ навигации по документу.
Рис. 19. Представление HTML-документа в виде древовидной структуры
Навигация по документу
В модели DOM к элементу можно обратиться непосредственно по его идентификатору id, воспользовавшись методом getElementById объекта Document:
<html> <head> <title>Основы DOM</title> </head> <body> <h1 id = "head">Основы DOM</h1> <p>A Text</p> <script language = "JavaScript"> var a = document.getElementById("head"); alert(a); </script> </body> </html>
Для получения коллекции всех элементов, соответствующих какому-либо тегу, используется метод объекта Document – getElementsByTagName. Например, var a = document.getElementsByTagName("TD") присвоит переменной a коллекцию всех элементов <td>. Обратите внимание, что имя элемента следует писать прописными буквами ("TD"). Рассмотрим пример использования метода getElementsByTagName:
<html> <head> <title>Основы DOM</title> </head> <body> <h1 id = "head">Основы DOM</h1> <table border = "2"> <tr> <td>1,1</td> <td>1,2</td> </tr> <tr> <td>2,1</td> <td>2,2</td> </tr> </table> <script language = "JavaScript"> var a = document.getElementsByTagName("TD"); a.item(0).style.color = "red"; a.item(3).style.fontFamily = "arial"; a.item(3).style.color = "green"; </script> </body> </html>
Чтобы воспользоваться преимуществом древовидной структуры, принятой в DOM для представления документа, следует использовать навигационные атрибуты (рис. 20), представленные в табл. 11.
Рис. 20. Навигационные атрибуты объекта Node
Таблица 11
Навигационные атрибуты объекта Node
Атрибут |
Описание |
firstChild |
Возвращает первый узел-потомок |
lastChild |
Возвращает последний узел-потомок |
previousSibling |
Возвращает предыдущий соседний узел, имеющий с текущим одного родителя |
nextSibling |
Возвращает следующий соседний узел, имеющий с текущим одного родителя |
parentNode |
Возвращает родительский узел |
ownerDocument |
Возвращает корневой узел документа, содержащий текущей узел |
nodeName |
Возвращает имя узла |
nodeValue |
Возвращает значение узла в текстовом формате |
nodeType |
Возвращает тип узла в виде числа |
В следующем примере осуществляется проход по древовидной структуре документа:
<html> <head> <title>Навигация по документу</title> </head> <body> <h1>Изучение навигации по документу</h1> <p>Абзац 1</p> <p>Абзац 2</p> <script language = "JavaScript"> var temp = document.documentElement; temp = temp.firstChild; alert(temp.tagName); if(temp.nextSibling == 3) temp = temp.nextSibling.next.Sibling; else temp = temp.nextSibling; alert(temp.tagName); temp = temp.firstChild; alert(temp.tagName); temp.style.color = "red"; if(temp.nextSibling == 3) temp = temp.nextSibling.nextSibling; else temp = temp.nextSibling; alert(temp.tagName); temp.style.color = "blue"; temp = temp.parentNode; alert(temp.tagName); </script> </body> </html>