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

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

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

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

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

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

Существует несколько 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
}

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



Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok