Классы и интерфейсы

13. Объектная модель документа. DOM W3C

Классы и интерфейсы

Модель W3C определяет в DOM не классы, а интерфейсы. Интерфейс — это набор свойств и методов. Этим набором обладает объект, поддерживающий интерфейс с данным именем.

В этой заметке рассмотрена современная объектная модель документа (уровни 1 и 2). Заметим, что ранняя модель DOM не отменяется, она продолжает работать совместно с моделью W3C, обеспечивая обратную совместимость кода.

Отображение документа в DOM-дерево

В отличие от модели DOM уровня 0, современная модель W3C не ограничивается созданием коллекций anchors, applets, forms, images и links, в ней отражается (и доступна web-разработчику) полная иерархическая схема HTML-документа.

Пусть HTML-документ задан следующим кодом:


<HTML>
  <HEAD>
   <TITLE>Простой документ</TITLE> 
  </HEAD>
  <BODY>
    <H1>Простой документ</H1>
    <P>Это <EM>первый</EM> абзац.</P>
  </BODY>
</HTML>

Для этого документа браузер построит объектное дерево, представленное на рисунке:

Обратите внимание — текстовые фрагменты порождают отдельные узлы в этой иерархии.

Вспомним, что узел, с которого «растёт» дерево, называется корнем. Корнем DOM-дерева является объект document. Остальная терминология «попахивает» семейными отношениями.

Узел, расположенный на уровень выше и непосредственно связанный с данным узлом, называется родительским по отношению к данному узлу. Например, узел P является родительским по отношению к узлу EM. Узлы, непосредственно связанные с данным и расположенные на один уровень ниже, называют дочерними (или сыновними) по отношению к данному. Например, текстовые узлы "Это ", " абзац." и узел EM являются дочерними по отношению к узлу P. Узлы, находящиеся на одном уровне и имеющие общего родителя называют братьями (или сёстрами, если говорить не об узлах, а о вершинах).

Также в ассоциативной связи с семейными отношениями вводятся понятия потомок и предок. Все узлы дерева являются потомками его корня document. Предками текстового узла "первый" являются узлы: EM (родитель), P (прародитель), BODY (прапрародитель), HTML (прапрапрародитель) и document — основатель рода.

Узлы

Каждый узел дерева DOM является объектом, обладающим интерфейсом Node (понятие интерфейса описано в следующем разделе). Свойства и методы интерфейса Node предлагают средства для работы с деревом DOM. В отличие от модели нулевого уровня, в модели W3C можно не только менять содержимое узла, но и добавлять новые или удалять старые узлы. В модели W3C дерево DOM находится под полным контролем web-разработчика.

Например, свойство childNodes интерфейса Node содержит список дочерних узлов данного узла (в виде объекта, подобного массиву).

Свойство firstChild содержит ссылку на первый дочерний узел, lastChild — ссылку на последний дочерний узел.

Свойство parentNode содержит ссылку на родителя.

Свойства nextSibling и previousSibling содержат ссылки соответственно на следующего и предыдущего брата данного узла.

При помощи этих свойств можно обойти все узлы дерева.

Такие методы, как appendChild (добавить ребенка), removeChild (удалить ребенка), replaceChild (заменить ребенка), insertBefore (вставить перед), позволяют модифицировать дерево DOM по своему усмотрению.

Классы и интерфейсы

Каждый узел DOM-дерева является объектом некоторого класса, реализованным в конкретном браузере. Имя этого класса не сообщается, это внутреннее дело реализации браузера. Сообщается только, что объекты этого класса обладают интерфейсом Node. Это означает, что в данном классе присутствуют все свойства и методы интерфейса Node, и мы можем ими пользоваться при работе с объектами.

Итак, Node — не класс. Мы не можем для создания нового узла написать конструкцию:


var node = new Node(); // Это неправильно!

Мы не можем создавать узлы при помощи оператора new, так как нам неизвестно имя класса — имя функции-конструктора узла. Это имя известно только браузеру и web-разработчику не сообщается.

Для создания узлов в DOM W3C предусмотрены специальные методы, которые называются методами-фабриками.

В примере 6 заметки 10 уже было показано использование двух методов-фабрик: createElement для создания нового абзаца и createTextNode для создания узла с текстом.


// Создадим узел "абзац"
var el = document.createElement("p"); 
// Добавим к созданному узлу потомка -- текстовый узел 
el.appendChild(document.createTextNode("Текст абзаца."));
// Добавим построенный узел к BODY -- и он сразу отобразится на экране
document.body.appendChild(el);

Имена методов-фабрик всегда начинаются со слова «create» (создать).

Далее в тексте для краткости будем использовать выражение «объект Node», понимая под этим «объект, поддерживающий интерфейс Node».

Интерфейс `Node`

Рассмотрим свойства и методы интерфейса Nodeподробнее, но этот обзор не претендует на полноту. За полным описанием надо обращаться к спецификациям W3C или к соответствующим справочникам.

Хороший и полный справочник приводится в книге Девида Флэнагана «JavaScript. Подробное руководство» (пятое издание, «Символ» 2008 год).

Далее смотрите раздел Node.

13. Объектная модель документа. DOM W3C