Введение в 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 в документе XMLEntity
необработанная сущность DTDNotation
нотация, объявленная в DTD
Несмотря на такое большое количество типов узлов, как правило, мы будем работать только с некоторыми из них.