Введение в Объектную Модель Документа (DOM), часть 1 из 6

• Уровни Объектной Модели Документа(DOM) и их поддержка в браузерах
• Браузеры, совместимые со стандартом
• Дерево документа (Document Tree)
• Узлы (Nodes)

Уровни Объектной Модели Документа(DOM) и их поддержка в браузерах

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

К примеру, большинство браузеров используют массив объектов Image для представления всех элементов <img /> на странице. Это дает возможность доступа к ним и управления ими с помощью Java Script. Простейшую подмену картинки можно сделать так:

document.images[3].src = "images/img2.gif"

Это устаревшая и ограниченная модель. Она дает доступ лишь к немногим типам элементов и атрибутов, например к изображениям(<img />), ссылкам(<a>) или формам(<form>).

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

Через некоторое время большинство производителей начали адаптировать свои браузеры (в основном это Internet Explorer, Netscape и Opera) к стандартам DOM, установленным консорциумом W3C.

Порядок обратной совместимости различных уровней стандартов DOM определен. Вы можете найти ссылки на DOM Level 0 (“DOM0”), которые соответствуют модели, используемой первыми браузерами, поддерживающими скрипты (в основном Internet Explorer и Netscape до 4 версии), например http://www.w3.org/TR/WD-DOM-19980318/. В 1998 году появился DOM1 и включил в себя возможности, представленные в 4 версии браузеров.

Браузеры, совместимые со стандартом

Большинство современных браузеров(начиная с 5 версии) поддерживают стандарт DOM2 или хотя бы часть его. Они также поддерживают более ранние уровни DOM, а также собственные ранее разработанные расширения для обеспечения работоспособности старых web-страниц.

Эта статья сосредоточена на стандарте DOM2. На момент написания статьи именно этот стандарт применяется к документам XML в целом и к документам HTML в частности.

Можно надеяться, что более новые версии браузеров будут полностью следовать стандартам. Сейчас же существует огромное количество трудностей, с которыми приходится сталкиваться при написании web-документов, полностью совместимых как с современными, так и более ранними браузерами.

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

Дерево документа (Document Tree)

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

Узлы (Nodes)

Каждый их этих различных типов объектов имеет свои уникальные методы и свойства, а также обеспечивает взаимосвязь узлов (Nodes). Это общие установки методов и свойств, связанные с древообразной структурой документа. Чтобы лучше понять, как все это происходит, рассмотрим простое дерево узлов.

Каждый узел (Node) содержит свойства, отражающие эту структуру и позволяющие перемещаться по всем узлам дерева документа. Ниже показаны примеры взаимоотношений этих узлов:

• NodeA.firstChild = NodeA1
• NodeA.lastChild = NodeA3
• NodeA.childNodes.length = 3
• NodeA.childNodes[0] = NodeA1
• NodeA.childNodes[1] = NodeA2
• NodeA.childNodes[2] = NodeA3
• NodeA1.parentNode = NodeA
• NodeA1.nextSibling = NodeA2
• NodeA3.previousSibling = NodeA2
• NodeA3.nextSibling = null
• NodeA.lastChild.firstChild = NodeA3a
• NodeA3b.parentNode.parentNode = NodeA

Интерфейс узлов содержит методы для динамического добавления, обновления или удаления узлов, например:

• insertBefore()
• replaceChild()
• removeChild()
• appendChild()
• cloneNode()

Это будет раскрыто чуть позже, а пока рассмотрим, как дерево документа отражает контент web-страницы.

Внимание! Это материал 2005 года. Какие-то факты могли утратить актуальность.