1. Все прямоугольники изображенные на картинке являются объектами (или узлами).
2. Красным цветом отмечен узел Document. Любое обращение к DOM должно начинаться с обращения к данному узлу.
3. Зеленым цветом отмечены элементные узлы. Для каждого HTML элемента на странице браузер создает соответствующий элементный узел.
4. Содержимое элементов хранится в
текстовых узлах. Текстовые узлы отмечены на нашей
схеме синим цветом.
21
5. Для каждого атрибута
Корнем этого дерева является элемент HTML, который имеет двух детей — HEAD и BODY. Элемент HEAD является отцом элемента TITLE, а элемент BODY — отцом элементов H1 и P (два последних элемента называются братьями, причем H1 является старшим братом, а P — младшим). Все элементы дерева являются потомками корня, а тот является их предком. При этом все элементы и тексты, образующие их содержимое, являются узлами дерева документа.
22
Каждый элемент данного дерева соответствует элементу HTML и, следовательно, имеет тег(и), содержимое и набор атрибутов.
Каждому узлу DOM сопоставлен набор правил CSS, куда входят стили по умолчанию, пользовательские и авторские стили. Исходя из этого набора и с учетом приоритетов для узла формируется вычисленная таблица стилей, которая и используется при его отображении
23
Отношения между узлами
Узлы в объектной структуре связаны друг с другом. Существует несколько специальных терминов для описания отношений между узлами:
Родительский узел (parent node) - родительским узлом по отношению к рассматриваемому объекту является узел, в который вложен рассматриваемый объект. На нашей схеме по отношению к узлам <h1> и <p> <body> является родительским. Для узла <title> родительским является узел <head>.
Узлы-потомки (child node) - узлом-потомком по отношению к рассматриваемому объекту является узел, который вложен в рассматриваемый объект. На нашей схеме по отношению к узлу <body> <h1> и <p> являются потомками. Для узла <head> потомком является <title>.
Узлы-братья (sibling node) - узлы находящиеся на одинаковом уровне вложенности по отношению к их родительскому узлу. На нашей схеме узлами-братьями являются <body> и <head>, <p> и <h1>.
Самый верхний узел в DOM называется корневым. На нашей схеме корневым является <html> (т.к. объект document не является частью DOM).
24
1.Все дочерние элементы, включая текстовые находятся в массиве childNodes.
2.Свойства firstChild и lastChild показывают на первый и последний дочерние элементы и равны null, если детей нет.
25
1.Свойство parentNode указывает на родителя.
2.Свойства previousSibling и nextSibling указывают на левого и правого братьев узла.
26
Обращение к элементам
Обращаться к содержимому элементов в HTML DOM можно двумя разными способами.
1.Использовать последовательное перемещение по объектной структуре до нахождения необходимого элемента.
2.Использовать прямое обращение к элементу по его идентификатору или имени тэга.
Второй способ безусловно проще и удобнее и в повседневной практике всегда используют именно его. Однако в учебных целях полезно разобрать оба способа.
27
Последовательное перемещение
<html>
<head>
<title>HTML DOM</title> </head>
<body>
<h1>HTML DOM.</h1> <p
style="color:green">Привет
всем.</p>
</body>
</html>
document.body.childNodes[1].childNodes[0].nodeValue // Привет всем.
28
Разберем процесс перемещения подробнее:
Обращаемся к объекту document, в котором находится DOM. Код на данном шаге имеет вид: document.
1.Обращаемся к корневому узлу (т.е. тэгу <html>) который находится внутри объекта document. Код на данном шаге имеет вид: document.documentElement.
2.Обращаемся ко второму потомку (так как в коде страницы body располагается после head) корневого узла. Код на данном этапе будет иметь вид: document.documentElement.childNodes[1]. Вы также можете напрямую обратится к body используя следующий код (далее будем полагать что выбрали этот вариант): document.body.
3.Обращаемся ко второму потомку body (элемент p задан в коде после h1). Код на данном этапе будет иметь вид: document.body.childNodes[1].
4.Обращаемся к текстовому узлу который является первым потомком p и узнаем значение его свойства. Код на данном этапе будет иметь вид: document.body.childNodes[1].childNodes[0].nodeValue
29
Прямое обращение к элементу
С помощью метода getElementById Вы можете напрямую обращаться к элементам по их идентификатору (атрибут id), а с помощью свойства innerHTML можно быстро считывать их текстовое содержимое.
30
<html>
<body>
<p>Это обычный абзац.</p>
<p id='par'>Это абзац с id=par.</p> <p>Это еще один обычный абзац.</p> <b>
<script type='text/javascript'>
//Выведем содержимое второго абзаца на страницу document.write(document.getElementById('par').innerHTML); </script>
</b>
</body>
</html>
31