DOM
Современные веб-страницы
Элементы страницы могут динамически
•Изменяться
•Добавляться
•Удаляться
Что собой представляет документ?
А что если представить документ так?
Документ
Корневой элемент <html>
Элемент |
|
|
Элемент |
|
||
<head> |
|
|
<body> |
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Элемент |
|
Элемент |
|
Текст |
||
<title> |
|
<h1> |
|
«Текст страницы» |
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Текст |
|
Текст |
«Моя страница» |
|
«Заголовок 1» |
|
|
|
W3C DOM
•DOM (Document Object Model) – объектная модель документа
•Независимый от платформы или языка интерфейс, позволяющий программам динамически обращаться к содержимому и структуре документа, а также изменять его
Стандарт DOM позволяет рассматривать документ как набор объектов, формирующих определенную структуру
DOM-дерево
Документ
Корневой элемент <html>
Элемент |
|
|
Элемент |
|
||
<head> |
|
|
<body> |
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Элемент |
|
Элемент |
|
Текст |
||
<title> |
|
<h1> |
|
«Текст страницы» |
||
|
|
|
|
|
|
|
Текст |
|
Текст |
«Моя страница» |
|
«Заголовок 1» |
|
|
|
Структура документа
Основная структурная единица дерева документа – узел (node). Узлами являются:
–Документ (document node)
–Любой HTML-элемент (element node)
–Текст внутри тега (text node)
–Любой атрибут тега (attribute node)
–Комментарий (comment node)
Виды связей между узлами
A
B
С |
|
D |
|
|
|
Узел A – это родитель (parent) узла B Узел B – дочерний узел (child) для узла A Узел B – это родитель (parent) узлов C и D
Узлы C и D – дочерние узлы (children) для узла B
Уузлов C и D нет дочерних узлов
Уузла A нет узла-родителя
Узлы C и D – «братья» (siblings)
Правила
•Каждый узел имеет строго одного родителя (кроме узла документа)
•Узел может иметь любое количество дочерних узлов (0 и более)
•«Братья» (siblings) – дочерние узлы одного родителя