Введение в DOM

Одой из ключевых задач JavaScript является взаимодействие с пользователем и манипуляция элементами веб-страницы. Для JavaScript веб-страница доступна в виде объектной модели документа document object model или сокращенно DOM. DOM описывает структуру веб-станицы в виде древовидного представления и предоставляет разработчикам способ получить доступ к отдельным элементам веб-станицы.

Важно не путать понятия BOM Browser Object Model объектная модель браузера и DOM document object model объектная модель документа. Если BOM предоставляет доступ к браузеру и его свойствам в целом, то DOM предоставляет доступ к отдельной веб-странице или html-документу и его элементам.

Рассмотрим простейшую страницу:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Page Header</h2>
<div>
<h3>Block Header</h3>
<p>Text</p>
</div>
</body>
</html>

Дерево DOM для этой страницы будет выглядеть следующим образом:

Таким образом, все компоненты упорядочены в DOM иерархическим образом, где каждый компонент представляет отдельный узел. То есть каждый элемент, например, элемент div, представляет собой узел. Но также и текст внутри элемента представляет отдельный узел. Существует следующие виды узлов:

Element html-элемент
Attr атрибут html-элемента
Document корневой узел html-документа
DocumentType DTD или тип схемы XML-документа
DocumentFragment место для временного хранения частей документа
EntityReference ссылка на сущность XML-документа
ProcessingInstruction инструкция обработки веб-страницы
Comment элемент комментария
Text текст элемента
CDATASection секция CDATA в документе XML
Entity необработанная сущность DTD
Notation нотация, объявленная в DTD

Несмотря на такое большое количество типов узлов, как правило, мы будем работать только с некоторыми из них.