Введение. Еще один блог веб разработчика Dom объектная модель документа

Данная публикация предваряет ряд статей об альтернативных способах работы с XML. "Альтернативных", потому что как правило работа с XML в 1С ограничивается разбором xml при помощи последовательного чтения - построчного разбора текстового содержимого. А ведь есть еще и другие способы.

Например, использование языка запросов к XML xPath или шаблонов трансформации XSL . Об этих вариантах будет рассказано в следующих статьях. Но все они опираются на базовое представление документов XML в виде DOM . О том, что такое DOM (document object model или объектная модель документа) и пойдет речь в публикации.

DOM базируется на представлении документа любой структуры в виде дерева узлов, каждый узел (нода) которого представляет собой элемент, атрибут элемента, текстовое значение элемента и т.п.. Связь между узлами построена по принципу "родитель - подчиненные". У корня документа (дерева DOM) родителя нет. У тупикового элемента нет подчиненного (такие элементы абстрактно называются листьями дерева). Таким образом модель DOM может создаваться не только для XML, но фактически для любого структурированного документа (HTML, XHTML). Так, например, браузер пользователя, получая HTML код веб-страницы из интернета, строит дерево DOM этой страницы в оперативной памяти компьютера пользователя.

Модель DOM открывает широкие возможности по манипуляции данными документа. Можно создавать новые узлы, вставлять их на разных уровнях дерева, копировать узлы, удалять узлы, искать узлы по разным параметрам и многое другое.

Модель DOM документа XML наглядно представлена на рисунке ниже.

Любой современный язык программирования имеет в своем составе средства (парсеры) для работы с таким деревом. Получая на вход строковое содержимое XML-парсер выстраивает в оперативной памяти дерево узлов и выполняет манипуляции с данными дерева. Преимущество такого подхода перед построчным разбором очевидно: одним запросом к дереву можно выбрать необходимы данные, не перебирая построчно весь документ, ведь в оперативной памяти находится полное представление элементов со всеми взимосвязями.

В платформе 1С модель DOM представлена специальным объектом ДокументDOM , который в свою очередь строится при помощи объекта ПостроительDOM и его метода Прочитать . На вход этому методу, как правило, подается либо объект ЧтениеXML , либо ЧтениеHTML , при помощи которых осуществляется непосредственное считывание из файлов или загрузка из строки текстового содержимого XML или HTML. Ну и далее есть ряд конструкций, позволяющих извлекать данные из объектоной модели прочитанного документа.

Из всех вариантов самым интересным с моей точки зрения является вариант №1 с использованием метода ВычислитьВыражениеXPath . Ему будет посвящена следующая статья.

Плюсы построчного разбора: потребность в ресурсах меньше. Минусы: долго по времени, чтобы получить данные нужно построчно прочитать весь файл, сложность программного кода при разборе XML-документов со сложной структурой.

Преимущество выборки через DOM: скорость выборки данных, простота программного кода. Минусы: требовательность к ресурсам, на построение и запросы к DOM расходуется оперативная память и процессорные мощности.

Работа с DOM-моделью

Каждый объект Window имеет свойство document , ссылающееся на объект Document. Этот объект Document не является автономным объектом. Он является центральным объектом обширного API, известного как объектная модель документа (DOM), который определяет порядок доступа к содержимому документа.

Объектная модель документа (Document Object Model, DOM) - это фундаментальный прикладной программный интерфейс, обеспечивающий возможность работы с содержимым HTML и XML-документов. Прикладной программный интерфейс (API) модели DOM не особенно сложен, но в нем существует множество архитектурных особенностей, которые вы должны знать.

Прежде всего, следует понимать, что вложенные элементы HTML или XML-документов представлены в виде дерева объектов DOM. Древовидное представление HTML-документа содержит узлы, представляющие элементы или теги, такие как и

И узлы, представляющие строки текста. HTML-документ также может содержать узлы, представляющие HTML-комментарии. Рассмотрим следующий простой HTML-документ:

Пример документа Это HTML-документ

Пример простого текста.

DOM-представление этого документа приводится на следующей диаграмме:

Тем, кто еще не знаком с древовидными структурами в компьютерном программировании, полезно узнать, что терминология для их описания была заимствована у генеалогических деревьев. Узел, расположенный непосредственно над данным узлом, называется родительским по отношению к данному узлу. Узлы, расположенные на один уровень ниже другого узла, являются дочерними по отношению к данному узлу. Узлы, находящиеся на том же уровне и имеющие того же родителя, называются сестринскими . Узлы, расположенные на любое число уровней ниже другого узла, являются его потомками. Родительские, прародительские и любые другие узлы, расположенные выше данного узла, являются его предками.

Каждый прямоугольник на этой диаграмме является узлом документа, который представлен объектом Node . Обратите внимание, что на рисунке изображено три различных типа узлов. Корнем дерева является узел Document, который представляет документ целиком. Узлы, представляющие HTML-элементы, являются узлами типа Element, а узлы, представляющие текст, - узлами типа Text. Document, Element и Text - это подклассы класса Node. Document и Element являются двумя самыми важными классами в модели DOM.

Тип Node и его подтипы образуют иерархию типов, изображенную на диаграмме ниже. Обратите внимание на формальные отличия между обобщенными типами Document и Element, и типами HTMLDocument и HTMLElement. Тип Document представляет HTML и XML-документ, а класс Element представляет элемент этого документа. Подклассы HTMLDocument и HTMLElement представляют конкретно HTML-документ и его элементы:

На этой диаграмме следует также отметить наличие большого количества подтипов класса HTMLElement, представляющих конкретные типы HTML-элементов. Каждый из них определяет JavaScript-свойства, отражающие HTML-атрибуты конкретного элемента или группы элементов. Некоторые из этих специфических классов определяют дополнительные свойства или методы, которые не являются отражением синтаксиса языка разметки HTML.

Работа большинства клиентских программ на языке JavaScript так или иначе связана с манипулированием элементами документа. В ходе выполнения эти программы могут использовать глобальную переменную document, ссылающуюся на объект Document. Однако, чтобы выполнить какие-либо манипуляции с элементами документа, программа должна каким-то образом получить, или выбрать, объекты Element, ссылающиеся на эти элементы документа. Модель DOM определяет несколько способов выборки элементов. Выбрать элемент или элементы документа можно:

по значению атрибута id;

по значению атрибута name;

по имени тега;

по имени класса или классов CSS;

по совпадению с определенным селектором CSS.

Все эти приемы выборки элементов описываются в следующих подразделах.

Все HTML-элементы имеют атрибуты id. Значение этого атрибута должно быть уникальным в пределах документа - никакие два элемента в одном и том же документе не должны иметь одинаковые значения атрибута id. Выбрать элемент по уникальному значению атрибута id можно с помощью метода getElementById() объекта Document:

Var section1 = document.getElementById("section1");

Это самый простой и самый распространенный способ выборки элементов. Если сценарию необходимо иметь возможность манипулировать каким-то определенным множеством элементов документа, присвойте значения атрибутам id этих элементов и используйте возможность их поиска по этим значениям.

В версиях Internet Explorer ниже IE8 метод getElementById() выполняет поиск значений атрибутов id без учета регистра символов и, кроме того, возвращает элементы, в которых будет найдено совпадение со значением атрибута name.

HTML-атрибут name первоначально предназначался для присваивания имен элементам форм, и значение этого атрибута использовалось, когда выполнялась отправка данных формы на сервер. Подобно атрибуту id, атрибут name присваивает имя элементу. Однако, в отличие от id, значение атрибута name не обязано быть уникальным: одно и то же имя могут иметь сразу несколько элементов, что вполне обычно при использовании в формах радиокнопок и флажков. Кроме того, в отличие от id, атрибут name допускается указывать лишь в некоторых HTML-элементах, включая формы, элементы форм и элементы и .

Выбрать HTML-элементы, опираясь на значения их атрибутов name, можно с помощью метода getElementsByName() объекта Document:

Var radiobuttons = document.getElementsByName("favorite_color");

Метод getElementsByName() определяется не классом Document, а классом HTMLDocument, поэтому он доступен только в HTML-документах и не доступен в XML-документах. Он возвращает объект NodeList , который ведет себя, как доступный только для чтения массив объектов Element.

В IE метод getElementsByName() возвращает также элементы, значения атрибутов id которых совпадает с указанным значением. Чтобы обеспечить совместимость с разными версиями браузеров, необходимо внимательно подходить к выбору значений атрибутов и не использовать одни и те же строки в качестве значений атрибутов name и id.

Метод getElementsByTagName() объекта Document позволяет выбрать все HTML или XML-элементы указанного типа (или по имени тега). Например, получить подобный массиву объект, доступный только для чтения, содержащий объекты Element всех элементов в документе, можно следующим образом:

Var spans = document.getElementsByTagName("span");

Подобно методу getElementsByName(), getElementsByTagName() возвращает объект NodeList. Элементы документа включаются в массив NodeList в том же порядке, в каком они следуют в документе, т.е. первый элемент

В документе можно выбрать так:

Var firstParagraph = document.getElementsByTagName("p");

Имена HTML-тегов не чувствительны к регистру символов, и когда getElementsByTagName() применяется к HTML-документу, он выполняет сравнение с именем тега без учета регистра символов. Переменная spans, созданная выше, например, будет включать также все элементы , которые записаны как .

Можно получить NodeList, содержащий все элементы документа, если передать методу getElementsByTagName() шаблонный символ «*».

Кроме того, классом Element также определяет метод getElementsByTagName(). Он действует точно так же, как и версия метода в классе Document, но выбирает только элементы, являющиеся потомками для элемента, относительно которого вызывается метод. То есть отыскать все элементы внутри первого элемента

Можно следующим образом:

Var firstParagraph = document.getElementsByTagName("p"); var firstParagraphSpans = firstParagraph.getElementsByTagName("span");

По историческим причинам класс HTMLDocument определяет специальные свойства для доступа к узлам определенных типов. Свойства images , forms и links , например, ссылаются на объекты, которые ведут себя как массивы, доступные только для чтения, содержащие элементы , и (но только те теги , которые имеют атрибут href). Эти свойства ссылаются на объекты HTMLCollection, которые во многом похожи на объекты NodeList, но дополнительно могут индексироваться значениями атрибутов id и name.

Объект HTMLDocument также определяет свойства-синонимы embeds и plugins , являющиеся коллекциями HTMLCollection элементов . Свойство anchors является нестандартным, но с его помощью можно получить доступ к элементам , имеющим атрибут name, но не имеющим атрибут href. Свойство scripts определено стандартом HTML5 и является коллекцией HTMLCollection элементов .

Каскадные таблицы стилей CSS имеют очень мощные синтаксические конструкции, известные как селекторы, позволяющие описывать элементы или множества элементов документа. Наряду со стандартизацией селекторов CSS3 , другой стандарт консорциума W3C, известный как Selectors API , определяет методы JavaScript для получения элементов, соответствующих указанному селектору.

Ключевым в этом API является метод querySelectorAll() объекта Document. Он принимает единственный строковый аргумент с селектором CSS и возвращает объект NodeList, представляющий все элементы документа, соответствующие селектору.

В дополнение к методу querySelectorAll() объект документа также определяет метод querySelector() , подобный методу querySelectorAll(), - с тем отличием, что он возвращает только первый (в порядке следования в документе) соответствующий элемент или null, в случае отсутствия соответствующих элементов.

Эти два метода также определяются классом Elements. Когда они вызываются относительно элемента, поиск соответствия заданному селектору выполняется во всем документе, а затем результат фильтруется так, чтобы в нем остались только потомки использованного элемента. Такой подход может показаться противоречащим здравому смыслу, так как он означает, что строка селектора может включать предков элемента, для которого выполняется сопоставление.

После выбора элемента документа иногда бывает необходимо отыскать структурно связанные части документа (родитель, братья, дочерний элемент). Объект Document можно представить как дерево объектов Node. Тип Node определяет свойства, позволяющие перемещаться по такому дереву. Существует еще один прикладной интерфейс навигации по документу, как дерева объектов Element.

Объект Document, его объекты Element и объекты Text, представляющие текстовые фрагменты в документе - все они являются объектами Node. Класс Node определяет следующие важные свойства:

Родительский узел данного узла или null для узлов, не имеющих родителя, таких как Document.

Доступный для чтения объект, подобный массиву (NodeList), обеспечивающий представление дочерних узлов.

Первый и последний дочерние узлы или null, если данный узел не имеет дочерних узлов.

Следующий и предыдущий братские узлы. Братскими называются два узла, имеющие одного и того же родителя. Порядок их следования соответствует порядку следования в документе. Эти свойства связывают узлы в двусвязный список.

Тип данного узла. Узлы типа Document имеют значение 9 в этом свойстве. Узлы типа Element - значение 1. Текстовые узлы типа Text - значение 3. Узлы типа Comments - значение 8 и узлы типа DocumentFragment - значение 11.

Текстовое содержимое узлов Text и Comment.

Имя тега элемента Element, в котором все символы преобразованы в верхний регистр.

С помощью этих свойств класса Node можно сослаться на второй дочерний узел первого дочернего узла объекта Document, как показано ниже:

Document.childNodes.childNodes == document.firstChild.firstChild.nextSibling

Допустим, что рассматриваемый документ имеет следующий вид:

TestHello World!

Тогда вторым дочерним узлом первого дочернего узла будет элемент . В свойстве nodeType он содержит значение 1 и в свойстве nodeName - значение «BODY».

Однако, обратите внимание, что этот прикладной интерфейс чрезвычайно чувствителен к изменениям в тексте документа. Например, если в этот документ добавить единственный перевод строки между тегами и , этот символ перевода строки станет первым дочерним узлом (текстовым узлом Text) первого дочернего узла, а вторым дочерним узлом станет элемент , а не .

Когда основной интерес представляют сами элементы документа, а не текст в них (и пробельные символы между ними), гораздо удобнее использовать прикладной интерфейс, позволяющий интерпретировать документ как дерево объектов Element, игнорируя узлы Text и Comment, которые также являются частью документа.

Первой частью этого прикладного интерфейса является свойство children объектов Element. Подобно свойству childNodes, его значением является объект NodeList. Однако, в отличие от свойства childNodes, список children содержит только объекты Element.

Обратите внимание, что узлы Text и Comment не имеют дочерних узлов. Это означает, что описанное выше свойство Node.parentNode никогда не возвращает узлы типа Text или Comment. Значением свойства parentNode любого объекта Element всегда будет другой объект Element или корень дерева - объект Document или DocumentFragment.

Второй частью прикладного интерфейса навигации по элементам документа являются свойства объекта Element, аналогичные свойствам доступа к дочерним и братским узлам объекта Node:

Похожи на свойства firstChild и lastChild, но возвращают дочерние элементы.

Похожи на свойства nextSibling и previousSibling, но возвращают братские элементы.

Количество дочерних элементов. Возвращает то же значение, что и свойство children.length.

Эти свойства доступа к дочерним и братским элементам стандартизованы и реализованы во всех текущих браузерах, кроме IE.

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

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

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

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

Заголовок Прекрасный документ

Самый внешний тег - , поэтому дерево начинает расти от него.

Внутри находятся два узла: и - они становятся дочерними узлами для .

Теги образуют узлы-элементы (element node). Текст представлен текстовыми узлами (text node). И то и другое - равноправные узлы дерева DOM.

Рассмотрим теперь более жизненную страничку:

О лосях Правда о лосях.

Корневым элементом иерархии является html . У него есть два потомка. Первый - head , второй - body . И так далее, каждый вложенный тег является потомком тега выше:

На этом рисунке синим цветом обозначены элементы-узлы, черным - текстовые элементы.

Дерево образовано за счет синих элементов-узлов - тегов HTML.

А вот так выглядит дерево, если изобразить его прямо на HTML-страничке:

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

Рассмотрим чуть более сложный документ.

Документ Data

• Осторожно
• Информация

Верхний тег - html , у него дети head и body , и так далее. Получается дерево тегов:

Атрибуты

В этом примере у узлов есть атрибуты: style , class , id . Вообще говоря, атрибуты тоже считаются узлами в DOM-модели, родителем которых является элемент DOM, у которого они указаны.

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

Вообще-то это секрет, но DOCTYPE тоже является DOM-узлом, и находится в дереве DOM слева от HTML (на рисунке этот факт скрыт).

P.S. Насчет секрета - конечно, шутка, но об этом и правда далеко не все знают. Сложно придумать, где такое знание может пригодиться...

При разборе HTML Internet Explorer сразу создает нормализованный DOM, в котором не создаются узлы из пустого текста.

Firefox - другого мнения, он создает DOM-элемент из каждого текстового фрагмента.
Поэтому в Firefox дерево этого документа выглядит так:

На рисунке для краткости текстовые узлы обозначены просто решеткой. У body вместо 3 появилось 7 детей.

Opera тоже имеет чем похвастаться. Она может добавить лишний пустой элемент "просто от себя".

Чтобы это увидеть - откройте документ . Он выдает число дочерних узлов document.body , включая текстовые узлы.

У меня получается 3 для IE, 7 для Firefox и 8 (!?) для Opera.

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

Зачем, кроме красивых рисунков, нужна иерархическая модель DOM?

Очень просто:

Каждый DOM-элемент является объектом и предоставляет свойства для манипуляции своим содержимым, для доступа к родителям и потомкам.

Для манипуляций с DOM используется объект document .
Используя document , можно получать нужный элемент дерева и менять его содержание.

Например, этот код получает первый элемент с тэгом ol , последовательно удаляет два элемента списка и затем добавляет их в обратном порядке:

Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)

Для примера работы такого скрипта - кликните на тексте на лосиной cтраничке

В старых руководствах и скриптах можно встретить модификацию HTML-кода страницы напрямую вызовом document.write .

В современных скриптах этот метод почти не используется, случаи его правильного применения можно пересчитать по пальцам.

Избегайте document.write.. Кроме случаев, когда вы действительно знаете, что делаете (а зачем тогда читаете самоучитель - вы и так гуру)

Разберем подробнее способы доступа и свойства элементов DOM.

Любой доступ и изменения DOM берут свое начало от объекта document .

Начнем с вершины дерева.

Самый верхний тег. В случае корректной HTML-страницы, это будет .

Тег , если есть в документе (обязан быть).

Следующий пример при нажатии на кнопку выдаст текстовое представление объектов document.documentElement и document.body . Сама строка зависит от браузера, хотя объекты везде одни и те же.

function go() { alert(document.documentElement) alert(document.body) }

У каждого элемента в DOM-модели есть тип. Его номер хранится в атрибуте elem.nodeType

Всего в DOM различают 12 типов элементов.

Обычно используется только один: Node.ELEMENT_NODE , номер которого равен 1. Элементам этого типа соответствуют HTML-теги.

Иногда полезен еще тип Node.TEXT_NODE , который равен 3. Это текстовые элементы.

Остальные типы в javascript программировании не используются.

Следующий пример при нажатии на кнопку выведет типы document.documentElement , а затем тип последнего потомка узла document.body . Им является текстовый узел.

function go() { alert(document.documentElement.nodeType) alert(document.body.lastChild.nodeType) } Текст

Например, вот так выглядел бы в браузере документ из примера выше, если каждый видимый элемент обвести рамкой с цифрой nodeType в правом верхнем углу.

... Data

• Осторожно
• Информация

Здесь показаны только элементы внутри body , т.к только они отображаются на странице. Для элементов типа 1 (теги) в скобочках указан соответствующий тег, для текстовых элементов (тип 3) - стоит просто цифра.

Все дочерние элементы, включая текстовые находятся в массиве childNodes .

В следующем примере цикл перебирает всех детей document.body .

For(var i=0; i BODY

style

Это свойство управляет стилем. Оно аналогично установке стиля в CSS.

Например, можно установить element.style.width:

Исходный код этой кнопки:

Есть общее правило замены - если CSS-атрибут имеет дефисы, то для установки style нужно заменить их на верхний регистр букв.

Например, для установки свойства z-index в 1000, нужно поставить:

Element.style.zIndex = 1000

innerHTML

Когда-то это свойство поддерживалось только в IE. Теперь его поддерживают все современные браузеры.

Оно содержит весь HTML-код внутри узла, и его можно менять.

Свойство innerHTML применяется, в основном, для динамического изменения содержания страницы, например:

Document.getElementById("footer").innerHTML = "Bye! "

Пожалуй, innerHTML - одно из наиболее часто используемых свойств DOM-элемента.

className

Это свойство задает класс элемента. Оно полностью аналогично html-атрибуту "class".

Elem.className = "newclass"

onclick , onkeypress, onfocus ...

И другие свойства, начинающиеся на "on...", хранят функции-обработчики соответствующих событий. Например, можно присвоить обработчик события onclick .

Подробнее об этих свойствах и обработчиках событий - см.

Тема действительно сложная. Но, как говорится, не так страшен чёрт, как его малюют. Вот тут-то самый крепкий орешек достаётся мне: этакая сверхзадача «намалевать» по возможности удобоваримо, но и не совсем примитивно. Пока что все прочитанные мной материалы тяготеют либо к зауми, либо к примитиву.

Что такое DOM

Аббревиатура DOM расшифровывается как Document Object Model (объектная модель документа).

DOM - это программный интерфейс доступа к содержимому HTML, XHTML и XML-документов, то есть представление тэгов и атрибутов HTML, XHTML и XML, а также стилей CSS в виде объектов программирования. С этой моделью работает как JavaScript, так и другие языки web-программирования.

Немного истории

Существует 4 уровня DOM (0, 1, 2 и 3).

Уровень 0 (1996) включал в себя модели DOM , которые существовали до появления уровня 1. В основном это коллекции: document.images, document.forms, document.layers и document.all. Эти модели формально не являются спецификациями DOM , опубликованными W3C . Скорее они представляют информацию о том, что существовало до начала процесса стандартизации.

Уровень 1 (1997) включал также базовые функциональные возможности по обработке XML-документов: многочисленные способы работы с отдельными узлами, работа с инструкциями обработки XML и т.д.

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

В DOM уровня 2 (2002) было добавлено несколько новых возможностей.

Если в DOM уровня 1 отсутствовала поддержка пространств имён, то интерфейсы DOM уровня 2 содержат методы для управления пространствами имён, связанными с требованиями к составлению и обработке XML-документов.

Помимо этого, DOM уровня 2 поддерживает события.

Уровень 2 является текущим уровнем спецификаций DOM , однако W3C рекомендует и некоторые разделы спецификаций уровня 3.

DOM уровня 3 - это рабочий проект спецификации, которая расширяет функциональность DOM уровня 2. Одна из наиболее важных особенностей этой версии спецификации заключается в возможности работать с многочисленными расширениями DOM .

Что означает «программный интерфейс»?

Английское слово interface можно перевести как «область контакта». Компьютер, грубо говоря, понимает только две вещи: пустой бит и заполненный бит. Язык, на котором «говорит» компьютер, можно представить как нескончаемую вереницу нулей и единиц, дающих бесконечное количество различных комбинаций.

Любой программный код - это вразумительная для программиста интерпретация этих «нулей и единиц», с которыми работает компьютер. Таким образом, любой язык программирования является интерфейсом человека и машины.

Браузеры работают так же, как и другие компьютерные приложения. Они интерпретируют в «нули и единицы» коды HTML, XML, CSS, скрипты JavaScript, PHP, Perl и т.д. Для работы с этим многоязычием нужна общая платформа. Этой платформой и является DOM - спецификация, не зависящая от конкретного языка программирования или разметки. Это интерфейс, который можно использовать во многих популярных языках программирования, связанных с созданием web-страниц и способных понимать и интерпретировать объекты DOM .

DOM и браузеры

DOM и JavaScript

В JavaScript вершиной иерархической лестницы объектов DOM , своеобразным «проводником» в этот интерфейс служит объект document , а объекты DOM становятся его свойствами, свойствами его свойств и т.д. Их также называют узлами DOM .

Узлы DOM

В DOM уровня 2 есть 12 типов узлов. За каждым типом узла DOM закреплена константа с уникальным именем. Большинство узлов предназначено для работы с XML . В сборке HTML - JavaScript , которой мы занимаемся, можно использовать только 5 типов. Но и эта «верхушка айсберга» представляет собой весьма «развесистое дерево», которое не охватить за одно-два занятия.

Полный набор констант типов узлов, определённый в спецификации W3C DOM (голубым подсвечены узлы, доступные для HTML - JavaScript ):

Имя константы	Значение	Описание
Node.ELEMENT_NODE		Узел элемента (возвращает корневой элемент документа, для HTML-документов это элемент HTML)
Node.ATTRIBUTE_NODE		Узел атрибута (возвращает атрибут элемента XML- или HTML-документа)
		Текстовый узел (#text)
Node.CDATA_SECTION_NODE		Узел секции CDATA (XML: альтернативный синтаксис для отображения символьных данных)
Node.ENTITY_REFERENCE_NODE
Node.ENTITY_NODE		Узел раздела
Node.PROCESSING_INSTRUCTION_NODE		Узел директивы XML
Node.COMMENT_NODE		Узел комментария
Node.DOCUMENT_NODE		Узел документа (основа доступа к содержанию документа и создания его составляющих)
Node.DOCUMENT_TYPE_NODE		Узел типа документа (возвращает тип данного документа, т.е. значение тэга DOCTYPE)
Node.DOCUMENT_FRAGMENT_NODE		Узел фрагмента документа (извлечение части дерева документа, создание нового фрагмента документа, вставка фрагмента в качестве дочернего элемента какого-либо узла и т.п.)
Node.NOTATION_NODE		Узел нотации*

* Нотации - это имена, идентифицирующие формат неанализируемых разделов, формат элементов, имеющих атрибут нотации, или прикладную программу, которой адресована директива. (Непонятно? Мне пока тоже не очень.)

Структура документа в модели DOM

Все объекты документа являются узлами DOM. Рассмотрим элементарный документ:

< title>DOM Заголовок

Текст абзаца

Вот схема его DOM-дерева:

Каждый узел может иметь дочерние узлы (на схеме к ним ведут стрелки). Объект document - основание дерева документа - тоже узел, но у него нет родительского узла и имеется ряд свойств и методов, отсутствующих у других узлов. Он имеет один дочерний узел: элемент .

У элемента два дочерних узла: и , для которых дочерними становятся все элементы, содержащиеся в них.

Внимание!

«Элемент» и «тэг» не синонимы. Тэг - это знак разметки: - это два разных тэга. А элемент - объект, помеченный этими тэгами:

Текст абзаца

.

Элементы , и

Содержат внутри себя текст . Это их дочерние текстовые узлы . У элемента есть также атрибут : align="center" . Узлы атрибутов - это тоже дочерние узлы элементов, которые их содержат.

При работе с узлами DOM-дерева используются их свойства и методы.

Некоторые свойства узлов

Маленькое вступление

Ещё раз повторю: когда мы обращаемся в скриптах к элементам страницы, то имеем дело не только с языком Javascript, но и с внедрённым в него интерфейсом DOM . Иногда необходимо отдавать себе в этом отчёт, иногда можно и забыть, «что говорим прозой».

Некоторыми свойствами и методами из объектной модели DOM мы уже таким образом пользовались. Поэтому временами я буду давать ссылки на предыдущие уроки.

В этом уроке мы не будем идти «академическим» путём, рассматривая все свойства всех узлов во всех браузерах. Для начала познакомимся с самыми практичными и «бесконфликтными» из них.

Именно поэтому не будем начинать, как принято, с «основных свойств»: nodeName и nodeValue .

tagName

Возвращает строку с именем тэга элемента. Все значения tagName содержат символы только верхнего регистра.

Синтаксис

элемент .tagName

Пример

Тестируем свойство tagName

document.write (document.getElementById ("testTagName" ).tagName)

Результат

Тестируем свойство tagName

innerHTML

С этим свойством мы уже встречались (см. Урок 10). А теперь понимаем, откуда оно взялось: «из дома».

Даёт доступ к содержимому элемента. Задаёт не только текстовое содержание, но и все тэги HTML, находящиеся внутри элемента.

Это свойство не только для чтения, но и для изменения содержимого.

Примечание

В IE для ряда элементов innerHTML работает только для чтения: это все табличные элементы, за исключением и , а также и .

Например, мы создали пустую таблицу без элемента и хотим программно вставить его в через innerHTML :

IE выдаст «неизвестную ошибку выполнения», а остальные браузеры произведут вставку.

В то же время, если мы запросим существующее содержимое элемента , например, через alert(document.getElementById("id").innerHTML) , то в IE это сработает.

Синтаксис

элемент .innerHTML = "назначенный текст"

Пример

Тестируем свойство innerHTML Абзац для вставки // Эта функция читает текст и вставляет его в заданный абзац. function testRead() { document.getElementById ("target" ).innerHTML = document.getElementById ("testInnerHTML" ).innerHTML } // Эта функция изменяет текст заданного абзаца. function testChange() { document.getElementById ("target" ).innerHTML = "Перекрашиваем и меняем текст" } // Эта функция возвращает свойство в исходное положение. function testReset() { document.getElementById ("target" ).innerHTML = "Абзац для вставки" }

Тестируем свойство innerHTML

Абзац для вставки

На этом уроке мы рассмотрим, что такое DOM, зачем он нужен, а также то, как он строится.

Что такое DOM?

Браузер, когда запрашивает страницу и получает в ответе от сервера её исходный HTML-код, должен сначала его разобрать. В процессе анализа и разбора HTML-кода браузер строит на основе него DOM-дерево .

После выполнения этого действия и ряда других браузер приступает к отрисовке страницы. В этом процессе он, конечно, уже использует созданное им DOM-дерево , а не исходный HTML-код.

DOM – это объектная модель документа, которую браузер создаёт в памяти компьютера на основании HTML-кода, полученного им от сервера.

Если сказать по-простому, то HTML-код – это текст страницы, а DOM – это набор связанных объектов, созданных браузером при парсинге её текста.

В Chrome исходный код страницы, который получает браузер, можно посмотреть во вкладке «Source» на панели «Инструменты веб-разработчика».

В Chrome инструмента, с помощью которого можно было бы посмотреть созданное им DOM-дерево нет. Но есть представление этого DOM-дерева в виде HTML-кода, оно доступно на вкладке «Elements». С таким представлением DOM веб-разработчику, конечно, намного удобнее работать. Поэтому инструмента, который DOM представлял бы в виде древовидной структуры нет.

Объекты в этой модели образуются практически из всего, что есть в HTML (тегов, текстового контента, комментариев и т.д.), включая при этом сам документ. Связи между этими объектами в модели формируются на основании того, как HTML-элементы расположены в коде относительно друг друга .

При этом DOM документа после его формирования можно изменять . При изменении DOM браузер практически мгновенно перерисовывает изображение страницы. В результате у нас отрисовка страницы всегда соответствует DOM .

Для чтения и изменения DOM программно браузер предоставляет нам DOM API или, другими словами, программный интерфейс. По-простому DOM API – это набор огромного количества различных объектов, их свойств и методов, которые мы можем использовать для чтения и изменения DOM .

Для работы с DOM в большинстве случаев используется JavaScript, т.к. на сегодняшний день это единственный язык программирования, скрипты на котором могут выполняться в браузере.

Зачем нам нужен DOM API? Он нам нужен для того, чтобы мы могли с помощью JavaScript изменять страницу на «лету», т.е. делать её динамической и интерактивной.

DOM API предоставляет нам (разработчикам) огромное количество методов, с помощью которых мы можем менять всё что есть на странице, а также взаимодействовать с пользователем. Т.е. данный программный интерфейс позволяет нам создавать сложные интерфейсы, формы, выполнять обработку действий пользователей, добавлять и удалять различные элементы на странице, изменять их содержимое, свойства (атрибуты), и многое другое.

Сейчас в вебе практически нет сайтов в сценариях которых отсутствовала бы работа с DOM.

Из чего состоит HTML-код страницы?

Перед тем, как перейти к изучению объектной модели документа необходимо сначала вспомнить, что из себя представляет исходный код веб-страницы (HTML-документа).

Исходный код веб-страницы состоит из тегов, атрибутов, комментариев и текста. Теги - это базовая синтаксическая конструкция HTML. Большинство из них являются парными. В этом случае один из них является открывающим, а другой – закрывающим. Одна такая пара тегов образует HTML-элемент. HTML-элементы могут иметь дополнительные параметры – атрибуты.

В документе для создания определённой разметки одни элементы находятся внутри других. В результате HTML-документ можно представить как множество вложенных друг в друга HTML-элементов.

В качестве примера рассмотрим следующий HTML код:

Заголовок страницы Название статьи Раздел статьи

Содержимое статьи

В этом коде корневым элементом является html . В него вложены элементы head и body . Элемент head содержит title , а body – h1 и div . Элемент div в свою очередь содержит h2 и p .

Теперь рассмотрим, как браузер на основании HTML-кода строит DOM-дерево.

Как строится DOM-дерево документа?

Как уже было описано выше браузер строит дерево на основе HTML-элементов и других сущностей исходного кода страницы. При выполнении этого процесса он учитывает вложенность элементов друг в друга.

В результате браузер полученное DOM-дерево использует не только в своей работе, но также предоставляет нам API для удобной работы с ним через JavaScript.

При строительстве DOM браузер создаёт из HTML-элементов, текста, комментариев и других сущностей этого языка объекты (узлы DOM-дерева).

В большинстве случаев веб-разработчиков интересуют только объекты (узлы), образованные из HTML-элементов.

При этом браузер не просто создаёт объекты из HTML-элементов, а также связывает их между собой определёнными связями в зависимости от того, как каждый из них относится к другому в коде.

Элементы, которые находятся непосредственно в некотором элементе являются по отношению к нему детьми. А он для каждого из них является родителем. Кроме этого, все эти элементы по отношению друг к другу являются сиблингами (братьями).

При этом в HTML любой элемент всегда имеет одного родителя (HTML-элемент, в котором он непосредственно расположен). В HTML у элемента не может быть несколько родителей. Исключение составляет только элемент html . У него нет родителя.

Чтобы получить DOM-дерево так как его строит браузер, необходимо просто «выстроить» все элементы в зависимости от их отношения друг к другу.

Создание DOM-дерева выполняется сверху вниз.

При этом корнем DOM-дерева всегда является сам документ (узел document). Далее дерево строится в зависимости от структуры HTML кода.

Например, HTML-код, который мы рассматривали выше будет иметь следующее DOM-дерево:

В самом верху этого дерева находится узел document . Данный узел связан с html , он является его ребёнком. Узел html образован элементом html (...). Узлы head (...) и body (...) имеют родительскую связь с html . По отношению друг ту другу они являются сиблингами, т.к. имеют одного родителя. Узел head связан с title (lt;title>...), он является его ребёнком. Узлы h1 и div связаны с body , для них он является родителем. Узел div связан с h2 (...) и p (), они являются его детьми.

Начинается дерево как было уже отмечено выше с объекта (узла) document . Он в свою очередь имеет один дочерний узел, образованный элементом html (...). Элементы head (...) и body (...) находятся в html и, следовательно, являются его детьми. Далее узел head является родительским для title (lt;title>...). Элементы h1 и div вложены в body , значит они являются его детьми. В div непосредственно расположены элементы h2 (...) и p (). Это значит, что узел div для каждого из них является родительским.

Вот так просто строится DOM-дерево в браузере на основании HTML-кода.

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

Задание

На основе DOM-дерева, представленного на рисунке, создайте HTML-код.