Как создать сайт

Введение в DOM

Здравствуйте!  Надо сказать что основное предназначение  JavaScript  это взаимодействие с HTML-элементами и непосредственно с этой темой мы и будем разбираться в сегодняшнем уроке.

DOM — сокращенно от Document Object Model(Объектная модель документа)  это модель HTML-страницы описывающая ее в виде дерева, где элементы страницы представлены в виде веток. Ее не следует путать с BOM — это модель браузера и работает она на уровень выше о ней у нас еще будет разговор.

Что такое DOM

Итак давайте разбираться что такое DOM как всегда на примере. Пусть есть вот такая страница:

 
   <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>My First HTML Page</title>
</head>
<body>
	<h2>My First Html page</h2>
	<ul>
		<li>Punkt 1</li>
		<li>Punkt 2</li>
		<li>Punkt 3</li>
	</ul>
</body>
</html>

Давайте построим DOM модель этой страницы. Наверху будет HTML элемент, а от него соответсвенно пойдут ветки других элементов, которые вложены в него. Сама структура будет выглядеть вот так

Итак как видите узлы в дереве DOM имеют упорядоченную иерархическую структуру, отношение родитель-потомок очень похоже на такое семейное дерево.

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

  • Element:  собственно сам html-элемент
  • Attr:  представляет из себя атрибут html-элемента
  • Document:  это самый главный узел  html-документа
  • DocumentType:  ти документа DTD или тип схемы XML-документа
  • DocumentFragment: место где  временно будут храниться части документа
  • EntityReference:  представляет из себя ссылку на XML-документа.
  • ProcessingInstruction: инструкция  как надо обрабатывать  веб-страницу
  • Comment: это просто комментарий
  • Text: собственно текст элемента

Как видите достаточно  много  видов узлов модели DOM но не стоит отчаиваться мы будем не все их использовать в основном мы будем работать с  узлом document.

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Также читайте

Читайте также  Координаты элементов в документе
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: