Dom - об’єктна модель документа

Об'єктна модель документа (Document Object Model - DOM) є стандартом, запропонованим веб-консорціумом, і регламентує спосіб представлення вмісту документа (зокрема веб-сторінки) у вигляді набору об'єктів. Під вмістом розуміється все, що може перебувати на веб-сторінці: малюнки, посилання, абзаци, текст і т. Д.

На відміну від об'єктної моделі браузера (BOM), яка є унікальною для кожного браузера, об'єктна модель документа є стандартом і має підтримуватися всіма браузерами. І хоча на практиці підтримка DOM реалізована не в повній мірі, проте необхідно прагнути слідувати вимогам цього стандарту як виробникам браузерів, так і розробникам веб-сайтів.

Слід зауважити, що DOM може застосовуватися не тільки в веб-сторінках, а й до будь-яких інших документів. Зокрема, вона може використовуватися з будь-якими словниками XML, причому одним з таких словників є HTML, а точніше, XHTML.

DOM є розвиваються стандартом і розбитий на три рівні. Перший рівень є першою версією стандарту і поки що єдиною закінченою. Він складається з двох розділів: перший є ядром і визначає принципи маніпуляції зі структурою документа (генерація і навігація), а другий присвячений поданням в DOM елементів HTML, що визначаються однойменними тегами.

Другий і третій рівні описують модель подій, доповнюють таблиці стилів, проходи по структурі.

Подання документа у вигляді дерева

В DOM документ представляється у вигляді деревовидної структури (рис. 19), що є однією з найбільш уживаних структур в програмуванні. Це забезпечує уніфікований спосіб навігації по документу.

Мал. 19. Подання HTML-документа у вигляді дерева

Навігація по документу

У моделі DOM до елементу можна звернутися безпосередньо за його ідентифікатором id. скориставшись методом getElementById об'єкта Document:

Для отримання колекції всіх елементів, відповідних якомусь тегу, використовується метод об'єкта Document - getElementsByTagName. Наприклад, var a = document.getElementsByTagName ( "TD") присвоїть змінній a колекцію всіх елементів . Зверніть увагу, що ім'я елемента слід писати прописними літерами ( "TD"). Розглянемо приклад використання методу getElementsByTagName:

Щоб скористатися перевагою деревовидної структури, прийнятої в DOM для подання документа, слід використовувати навігаційні атрибути (рис. 20), представлені в табл. 11.

Мал. 20. Навігаційні атрибути об'єкта Node

Навігаційні атрибути об'єкта Node

Повертає тип вузла у вигляді числа

У наступному прикладі здійснюється прохід по деревовидної структури документа:

Динамічна генерація веб-сторінок засобами DHTML на основі DOM

Іноді потрібно динамічно формувати веб-сторінки, наприклад, в разі створення чатів, форумів, або динамічно створюваних веб-сторінок, вміст яких зберігається в базі даних. DOM дозволяє вирішити таке завдання.

Для створення об'єктів у об'єкта Document є такі методи (табл. 12):

Методи об'єкта Document, що дозволяють створювати об'єкти

Створює новий вузол елемента з вказаним ім'ям

Створює текстовий вузол із зазначеним текстом

Створює новий вузол атрибута з вказаним ім'ям

Новостворені об'єкти додаються в структуру документа за допомогою методів об'єкта Node (табл. 13):

Методи об'єкта Node, що додають і видаляють елементи документа

Додає об'єкт Node в кінець списку вузлів-нащадків

Створює об'єкт Node, ідентичний зазначеному в аргументі. Як аргумент можна використовувати і всі вузли-нащадки одночасно

Повертає true, якщо вузол має нащадків

Вставляє об'єкт Node в список нащадків перед вузлом, зазначеним в якості другого параметра

Видаляє вузол-нащадок, вказаний як параметр

Замінює старого нащадка на нового

Наведемо приклад динамічної генерації документа засобами DOM (рис. 21).

Мал. 21. Динамічно згенерувала веб-сторінка

Для читання і установки атрибутів використовуються наступні методи об'єкта Element (табл. 14).

Методи об'єкта Element

Повертає значення атрибута

Встановлює значення атрибута

Встановлює значення атрибута за замовчуванням, затираючи поточне значення

Нижче наведено приклад на завдання атрибутів. І хоча застосування атрибутів фізичного форматування не рекомендоване до застосування (для цих цілей використовуються стилі), вони були обрані в якості прикладу, так як наочно демонструють ідею завдання атрибутів методами DOM.

Модель подій DOM

Особливістю програм, що створюються для середовища веб є те, що вони управляються подіями. Щоб дізнатися, яка подія відбулася, в DOM є об'єкт події event (табл. 15). Об'єкт event є локальним і його слід явним чином передавати в обробник події.

Властивості об'єкта event

Вказує можливість «спливання» події (передачі управління вгору по ієрархічній структурі)

Вказує можливість скасування дії події, заданого за замовчуванням