Объектная модель документа

DOM – Document Object Model

Модель DOM

Обеспечивает доступ ко всем элементам документа и их атрибутам посредством древовидной структуры объектов
Позволяет создавать, удалять и изменять элементы документа и их содержимое
DOM – представление документа, загруженного в окно браузера, в виде дерева тегов

2

Терминология DOM

     Документ 

3

Терминология DOM

Каждый документ содержит элементы, представляемые узлами
Всего существует 12 типов узлов, основных узлов два: узел-элемент и узел-текст
Тег (с возможными атрибутами) представляется узлом-элементом
Текст представляется узлом-текстом
Узел-элемент и узел-текст – равноправные узлы дерева
Типы узлов приведены в спецификации DOM
http://www.w3.org/TR/DOM-Level-3-Core/idl-definitions.html

ELEMENT_NODE = 1
ATTRIBUTE_NODE = 2
TEXT_NODE = 3
CDATA_SECTION_NODE = 4
ENTITY_REFERENCE_NODE = 5
ENTITY_NODE = 6
PROCESSING_INSTRUCTION_NODE = 7
COMMENT_NODE = 8
DOCUMENT_NODE = 9
DOCUMENT_TYPE_NODE = 10
DOCUMENT_FRAGMENT_NODE = 11
NOTATION_NODE = 12

4

Навигация по дереву

Начать навигацию по дереву можно с любого узла, для которого известен идентификатор, задаваемый параметром тега id
МетодgetElementById(идентификатор_узла)

5

Навигация по дереву


1. Первый

2. Второй

3. Третий


6

Навигация по дереву

Свойства для чтения
parentNode
childNodes[i]
firstChild

(Node – текущий узел)
lastChild
previousSibling
nextSibling

7

Навигация по дереву

Нумерованный список


1. Первый

2. Второй

3. Третий


8

9

Проблемы навигации по дереву

Некоторые браузеры трактуют символы пробелов и переходы на новую строку как текстовые узлы
Это вызывает проблемы при использовании свойств: firstChild, lastChild, nextSibling, previousSibling

10

Свойства узлов

nodeType – тип узла
nodeName и tagName – имя тега
nodeName определено для многих типов узлов
tagName определено только для элементов-узлов

11

Свойства узлов

innerTEXT – текст элемента без тегов HTML (чт/зап)
outerTEXT – текст элемента без тегов HTML (чт/зап)
innerHTML – содержит текст и HTML-элементы для данного тега (html-содержимое узла в виде строки)
outerHTML – содержит текст и HTML-элементы для данного и вложенных тегов (html-узел целиком)

12

Свойства innerTEXT и outerTEXT

Чтение

13

Свойства innerTEXT и outerTEXT

Запись

14

Свойства innerHTML и outerHTML

15

Свойства innerHTML и outerHTML

Ясеневая роща

16

Редактирование дерева

Методы
createElement()создание нового узла-элемента
createTextNode() создание нового узла-текста
appendChild()добавление узла в конец коллекции childNodes узла, для которого метод был вызван
insertBefore()добавление узла с возможностью указания места, куда вставляется новый узел

17

Редактирование дерева

Нумерованный список


1. Первый
2. Второй
3. Третий


18

Редактирование дерева

Нумерованный список


1. Первый
2. Второй
3. Третий


19

Редактирование дерева

Щелкните здесь, чтобы вставить новый текст

20

Редактирование дерева

Удаление узла
removeChild()удаление потомка узла, для которого метод был вызван
removeNode()удаление узла из документа

21

Редактирование дерева

Нумерованный список


1. Первый
2. Второй
3. Третий


22

Редактирование дерева

Нумерованный список


1. Первый
2. Второй
3. Третий


23

Редактирование дерева

Атрибуты узлов
createAttribute()создает новый атрибут узла
setAttribute()присваивает значение атрибуту
removeAttribute()удаляет атрибут
getAttribute()возвращает текущее значение атрибута

24

Работа с атрибутами

Работа с атрибутом узла

Вставка новой ссылки

Сайт НГУ

Щелкните здесь, чтобы вставить новую ссылку

26

Вставка новой ссылки

27

Изменение типа списка


1. Пункт 1

2. Пункт 2

3. Пункт 3


28

Изменение типа списка

29

Замена изображения

Щелкните на папке

30

Замена изображения

31

Отображение и скрытие

Это первый абзац.

Это первый абзац.

Это первый абзац.

32

Отображение и скрытие

33