Работа с DOM

Введение в DOM

Последнее обновление: 1.11.2015

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

Важно не путать понятия BOM (Browser Object Model - объектная модель браузера) и DOM (объектная модель документа). Если 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-tree in JavaScript

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

Существует следующие виды узлов:

  • Element: html-элемент

  • Attr: атрибут html-элемента

  • Document: корневой узел html-документа

  • DocumentType: DTD или тип схемы XML-документа

  • DocumentFragment: место для временного хранения частей документа

  • EntityReference: ссылка на сущность XML-документа

  • ProcessingInstruction: инструкция обработки веб-страницы

  • Comment: элемент комментария

  • Text: текст элемента

  • CDATASection: секция CDATA в документе XML

  • Entity: необработанная сущность DTD

  • Notation: нотация, объявленная в DTD

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

Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850