Dom объектная модель документа. Основы работы с DOM в JavaScript. Возможности, которые дает DOM

Этот раздел представляет краткое знакомство с Объектной Моделью Документа (DOM) - что такое DOM, каким образом предоставляются структуры HTML и XML документов, и как взаимодействовать с ними. Данный раздел содержит справочную информацию и примеры.

Что такое Объектная Модель Документа (DOM)?

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

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

Каким образом доступен DOM?

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

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

В следующем примере внутри элемента определен код JavaScript, данный код устанавливает функцию при загрузке документа (когда весь DOM доступен для использования). Эта функция создает новый элемент H1, добавляет текст в данный элемент, а затем добавляет H1 в дерево документа:

< html > < head > < script > // запуск данной функции при загрузке документа window. onload = function () { // создание нескольких элементов // в пустой HTML странице heading = document. createElement( "h1" ) ; heading_text = document. createTextNode( "Big Head!" ) ; heading. appendChild( heading_text) ; document. body. appendChild( heading) ; } < body > Важные типы данных

Данный раздел предназначен для краткого описания различных типов и объектов в простой и доступной манере. Существует некоторое количество различных типов данных, которые используются в API, на которые вы должны обратить внимание. Для простоты, синтаксис примеров в данном разделе обычно ссылается на узлы как на element s, на массивы узлов как на nodeList s (либо просто element s) и на атрибуты узла, просто как на attribute s.

Ниже таблица с кратким описанием этих типов данных.

document	Когда член возвращает объект типа document (например, свойство элемента ownerDocument возвращает документ к которому он относится), этот обьект document является собственным корневым обьектом. В DOM document Reference разделе описан объект document. element
element	обозначает элемент или узел типа element, возвращаемый членом DOM API. Вместо того, чтобы говорить, что метод document.createElement() возвращает ссылку на node, мы просто скажем, что этот элемент возвращает element, который просто был создан в DOM. Объекты element реализуют DOM element интерфейс и также более общий Node интерфейс. Оба интерфейса включены в эту справку. nodeList
NodeList	массив элементов, как тот, что возвращается методом Document.getElementsByTagName(). Конкретные элементы в массиве доступны по индексу двумя способами: list.item(1) Эти способы эквивалентны. В первом способе item() - единственный метод объекта NodeList. Последний использует обычный синтаксис массивов, чтобы получить второе значение в списке.
attribute	Когда attribute возвращается членом API (например, метод createAttribute()) - это будет ссылка на объект, который предоставляет специальный (хоть и небольшой) интерфейс для атрибутов. Атрибуты - это узлы в DOM, как и элементы, хотя вы можете редко использовать их в таком виде.
namedNodeMap	namedNodeMap подобна массиву, но элементы доступны по имени или индексу. Доступ по индексу - это лишь для удобства перечисления, т.к. элементы не имеют определенног порядка в списке. Этот тип данных имеет метод item() для этих целей и вы можете также добавлять и удалять элементы из namedNodeMap

DOM-интерфейсы (DOM interfaces)

Это руководство об объектах и реальных вещах, которые вы можете использовать для управления DOM-иерархией. Есть много моментов, где понимание того, как это работает, может удивлять. Например, объект, представляющий HTML form элемент, берет своё свойство name из интерфейса HTMLFormElement, а свойство className - из интерфейса HTMLElement. В обоих случаях свойство, которое вы хотите, находится в этом объекте формы.

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

Интерфейсы и объекты (Interfaces and objects)

Многие объекты реализуют действия из нескольких интерфейсов. Объект таблицы, например, реализует специальный , который включает такие методы как createCaption и insertRow . Но так как это таблица - это ещё и HTML-элемент, table реализует интерфейс Element , описанный в разделе . Наконец, так как HTML-элемент (в смысле DOM) - это узел (node) в дереве, которое составляет объектную модель для HTML- или XML-страницы, табличный элемент также реализует более общий интерфейс Node , из которого происходит Element .

Var table = document.getElementById("table"); var tableAttrs = table.attributes; // Node/Element interface for (var i = 0; i < tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border";

Основные интерфейсы в DOM (Core interfaces in the DOM)

Этот раздел перечисляет несколько самых распространенных интерфейсов в DOM. Идея не в том чтобы описать, что делают эти методы API, но в том чтобы дать вам несколько мыслей насчет видов методов и свойств, которые вы будете часто видеть, используя DOM. Эти распространенные части API использованы в большинстве примеров раздела в конце этой справки.

Document, window - это объекты, чьи интерфейсы вы, как правило, очень часто используете в программировании DOM. Говоря простыми словами, объект window представляет что-то вроде браузера, а объект document - корень самого документа. Element наследуется от общего интерфейса Node , и эти интерфейсы вместе предоставляют много методов и свойств, которые можно применять у отдельных элементов. Эти элементы также могут иметь отдельные интерфейсы для работы с типами данных, которые эти элементы содержат, как в примере с объектом table в предыдущем случае.

Ниже представлен краткий список распространненых членов API, используемых в программировании веб- и XML-страниц с использованием DOM:

• parentNode.appendChild (node)

Тестирование DOM API

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

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

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

< html > < head > < title > DOM Tests < script type = " application/javascript" > function setBodyAttr (attr, value) { if (document. body) eval ("document.body." + attr+ "="" + value+ """ ) ; else notSupported () ; } < body > < div style =" margin : .5 in; height : 400 ; " > < p > < b > < tt > text < form > < select onChange = " setBodyAttr(" text" , this.options.value);" > < option value = " black" > black < option value = " darkblue" > darkblue < p > < b > < tt > bgColor < select onChange = " setBodyAttr(" bgColor" , this.options.value);" > < option value = " white" > white < option value = " lightgrey" > gray < p > < b > < tt > link < select onChange = " setBodyAttr(" link" , this.options.value);" > < option value = " blue" > blue < option value = " green" > green < small > < a href = " http://www.brownhen.com/dom_api_top.html" id = " sample" > (sample link) < br > < form > < input type = " button" value = " version" onclick = " ver()" />

Чтобы протестировать много интерфейсов на одной странице, набор свойств, которые изменяют цвета веб-страницы, можно создать похожую веб-страницу с целой "консолью" кнопок, текстовых полей и других элементов. Следующий скриншот даёт идею, как интерфейсы могут быть сгруппированы вместе для тестирования

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

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

Что такое 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», является программным интерфейсом доступа к элементам веб-страниц. По сути, это API страницы, позволяющий читать и манипулировать содержимым, структурой и стилями страницы. Давайте разберемся как это устроено и как это работает.

Как строится веб-страница?

Процесс преобразования исходного HTML-документа в отображаемую стилизованную и интерактивную страницу, называется “Critical Rendering Path”(“Критическим путем рендеринга”). Хотя этот процесс можно разбить на несколько этапов, как я описал это в статье «Понимание критического пути рендеринга », эти этапы можно условно сгруппировать в два этапа. В первом браузер анализирует документ, чтобы определить, что в конечном итоге будет отображаться на странице, а во второй браузер выполняет рендеринг.

Результатом первого этапа является то, что называется “render tree”(«дерево рендеринга»). Дерево рендеринга – это представление элементов HTML, которые будут отображаться на странице, и связанных с ними стилей. Чтобы построить это дерево, браузеру нужны две вещи:

CSSOM, представление стилей, связанных с элементами

DOM, представление элементов

Из чего состоит DOM?

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

Структура объектов DOM представлена тем, что называется «деревом узлов». Оно так называется, потому что его можно рассматривать как дерево с одним родительским элементом, который разветвляется на несколько дочерних ветвей, каждая из которых может иметь листья. В этом случае родительский «элемент» – это корневой элемент, дочерние «ветви» – это вложенные элементы, а «листья» – это содержимое внутри элементов.

Давайте рассмотрим этот HTML-документ в качестве примера:

My first web page Hello, world!

How are you?

Этот документ может быть представлен в виде следующего дерева узлов:

• html
  • head
    • title
      • My first web page
  • body
    • h1
      • Hello, world!
    • p
      • How are you?

Чем DOM не является

В приведенном выше примере кажется, что DOM является отображением 1: 1 исходного HTML-документа. Однако, как я уже говорил, есть различия. Чтобы полностью понять, что такое DOM, нам нужно взглянуть на то, чем он не является.

DOM не является копией исходного HTML

Хотя DOM создан из HTML-документа, он не всегда точно такой же. Есть два случая, в которых DOM может отличаться от исходного HTML.

1. Когда HTML содержит ошибки разметки

DOM – это интерфейс доступа к действительных (то есть уже отображаемым) элементам документа HTML. В процессе создания DOM, браузер сам может исправить некоторые ошибки в коде HTML.

Рассмотрим в качестве примера этот HTML-документ:

Hello, world!

В документе отсутствуют элементы и , что является обязательным требованием для HTML. Но если мы посмотрим на получившееся дерево DOM, то увидим, что это было исправлено:

• html
  • head
  • body
    • Hello, world!
  2. Когда DOM модифицируется кодом Javascript

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

  Мы можем, например, создать дополнительные узлы для DOM, используя Javascript.

  Var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("I"m new!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);

  Этот код изменит DOM, но изменения не отобразятся в документе HTML .

  DOM – это не то, что вы видите в браузере (то есть, дерево рендеринга)

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

  Поскольку дерево рендеринга имеет отношение только к тому, что отображается, оно исключает элементы, которые визуально скрыты. Например, элементы, у которых есть стили с display: none .

  Hello, world!

  How are you?

  DOM будет включать элемент

  • html
    • head
    • body
      • h1
        • Hello, world!
      • p
        • How are you?

  Однако дерево рендеринга и, следовательно, то, что видно в окне просмотра, не будет включено в этот элемент.

  • html
    • body
      • h1
        • Hello, world!
  DOM – это не то, что отображается в DevTools

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

  Лучший пример этого – псевдоэлементы CSS. Псевдоэлементы, созданные с использованием селекторов ::before и ::after , являются частью CSSOM и дерева рендеринга, но технически не являются частью DOM. Это связано с тем, что DOM создается только из исходного HTML-документа, не включая стили, примененные к элементу.

  Несмотря на то, что псевдоэлементы не являются частью DOM, они есть в нашем инспекторе элементов devtools.

  
  Резюме

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

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

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

Используя DOM Вы можете взаимодействовать (считывать, изменять, удалять ) с содержимым HTML документов из скриптов.

Ниже располагается код HTML документа и DOM, которая бы была создана браузером на основе этого кода:

HTML DOM HTML DOM.

Привет всем.

Все прямоугольники изображенные на картинке являются объектами (или узлами). Разным цветом на изображение отмечены узлы разного типа .

Красным цветом отмечен узел Document. Любое обращение к DOM должно начинаться с обращения к данному узлу.

Зеленым цветом отмечены элементные узлы . Для каждого HTML элемента на странице браузер создает соответствующий элементный узел.

Содержимое элементов хранится в текстовых узлах . Текстовые узлы отмечены на нашей схеме синим цветом.

Для каждого атрибута HTML элемента создается атрибутный узел . Атрибутный узел отмечен на схеме розовым цветом.

Обратите внимание: не забывайте, что текст всегда хранится в текстовых узлах, а не является свойством элемента. Т.е. для того, чтобы обратиться к содержимому HTML элемента Вы должны обратиться к свойству его текстового узла.

Отношения между узлами

Узлы в объектной структуре связаны друг с другом. Существует несколько специальных терминов для описания отношений между узлами:

Родительский узел (parent node ) - родительским узлом по отношению к рассматриваемому объекту является узел, в который вложен рассматриваемый объект. На нашей схеме по отношению к узлам и

является родительским. Для узла родительским является узел .

Узлы-потомки (child node ) - узлом-потомком по отношению к рассматриваемому объекту является узел, который вложен в рассматриваемый объект. На нашей схеме по отношению к узлу и

Являются потомками. Для узла потомком является .

Узлы-братья (sibling node ) - узлы находящиеся на одинаковом уровне вложенности по отношению к их родительскому узлу. На нашей схеме узлами-братьями являются и ,

Самый верхний узел в DOM называется корневым . На нашей схеме корневым является (т.к. объект document не является частью DOM).

W3C
Создатели DOM

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

DOM (document object model) — объектная модель документа, создан W3C (World Wide Web Consortium) — консорциумом всемирной паутины.

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

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

Принцип работы DOM

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

История DOM

Изначально DOM не был стандартизирован и существовавшие на тот момент два браузера Netscape Navigator и Internet Explorer , создавали DOM по своему разумению. В то время, веб-программистам приходилось изучать две версии DOM.

На данный момент, W3C стандартизировал DOM и все браузеры стараются придерживаться этого стандарта.