Powered by GitBook

Конспект JS-course

Дерево DOM

Источник: http://learn.javascript.ru/dom-nodes

Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) — объектная модель, используемая для XML/HTML-документов.

Согласно DOM-модели, документ является иерархией, деревом.

Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».

Проще говоря, DOM — это представление документа в виде дерева тегов, доступное для изменения через JavaScript.

Пример DOM

Построим, для начала, дерево DOM для следующего документа.

<html>
  <head>
    <title>О лосях</title>
  </head>
  <body>
     Правда о лосях
   </body>
</html>

В этом дереве выделено два типа узлов.

  1. Теги образуют узлы-элементы (element node) DOM-дерева. Естественным образом одни узлы вложены в другие.
  2. Текст внутри элементов образует текстовые узлы. Текстовый узел содержит исключительно строку текста и не может иметь потомков.

Ещё узлы

Дополним страницу новыми тегами и комментарием:

<!DOCTYPE HTML>
<html>
  <head>
    <title>О лосях</title>
  </head>
  <body>
    Правда о лосях
    <ol>
      <li>Лось — животное хитрое</li>
      <!-- комментарий -->
      <li>..и коварное!</li>
    </ol>
  </body>
</html>

В этом примере тегов уже больше, и даже появился узел нового типа — узел-комментарий. Казалось бы, зачем комментарий в DOM? На отображение-то он всё равно не влияет. Но так как он есть в HTML — обязан присутствовать в DOM-дереве.

Всё, что есть в HTML, находится и в DOM.

Поскольку DOM-модель в точности соответствует документу, пробельные символы так же важны, как и любой другой текст.

На картинке выше текстовые узлы, содержащие пробелы, выделены серым. Единственное исключение — пробелы перед и между HEAD/BODY на самом верхнем уровне документа. В DOM их никогда нет, согласно требованиям стандарта. Все остальные пробелы сохраняются в точности.

Пробелы есть в DOM, только если они есть в документе. Если не будет пробелов между тегами — не будет и пробельных узлов.

Следующий документ вообще не содержит пробельных узлов:

<!DOCTYPE HTML><html><head><title>Title</title></head><body></body></html>

В IE до версии 9 пробельных узлов нет. DOCTYPE — тоже узел.

Возможности, которые дает DOM

DOM нужен для того, чтобы манипулировать страницей — читать информацию из HTML, создавать и изменять элементы. Фактически, DOM предоставляет возможность делать со страницей всё, что угодно.

Итого

  • DOM-модель — это внутреннее представление HTML-страницы в виде дерева.
  • Все элементы страницы, включая теги, текст, комментарии, являются узлами DOM.
  • У элементов DOM есть свойства и методы, которые позволяют изменять их.
  • Кстати, DOM-модель используется не только в JavaScript, это известный способ представления XML-документов.