JavaScript - Объектная модель документа или DOM

Каждая веб-страница находится внутри окна браузера, который можно рассматривать как объект.

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

Способ доступа и изменения содержимого документа называется Document Object Model или DOM. Объекты организованы в иерархии. Эта иерархическая структура применяется к организации объектов в веб-документе.

• Окно - верх иерархии. Это самый главный элемент иерархии объектов.
• Объект документа. Каждый HTML-документ, который загружается в окно, становится объектом документа. Документ содержит содержимое страницы.
• Объект формы - все, заключенное в теги form ... / form, задает объект формы.
• Элементы управления формой. Объект формы содержит все элементы, определенные для этого объекта, такие как текстовые поля, кнопки, переключатели и флажки.

Вот простая иерархия нескольких важных объектов -

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

• Legacy DOM - это модель, которая была представлена в ранних версиях языка JavaScript. Он хорошо поддерживается всеми браузерами, но обеспечивает доступ только к определенным ключевым частям документов, таким как формы, элементы формы и изображения.
• W3C DOM. Эта объектная модель документа позволяет получать доступ и изменять весь контент документа и стандартизован консорциумом World Wide Web (W3C). Эта модель поддерживается практически всеми современными браузерами.
• IE4 DOM - эта объектная модель документа была представлена в версии 4 браузера Microsoft Internet Explorer. IE 5 и более поздние версии включают поддержку большинства базовых функций W3C DOM.

Совместимость DOM

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

if (document.getElementById) {
   // If the W3C method exists, use it
}
 
else if (document.all) {
   // If the all[] array exists, use it
}
 
else {
   // Otherwise use the legacy DOM
}

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!