5. Управління документом

Питання для вивчення

1. Об'єктна модель документа

2. Дерево документа

3. Динамічний вміст

1. Об'єктна модель документа

DOM (Document Object Model) – об'єктна модель документа – це подання документа (на мові розмітки у разі веб-технологій) у вигляді ієрархії структурних частин – вузлів.

Мета DOM – забезпечити можливість довільного програмного управління документом.

Модель DOM0. У цій моделі структуру об'єкта document можна зобразити у вигляді схеми (Рис. 7.1), з якої видно, що document містить ряд сімейств, властивостей і методів, - вони виділені в окремі стовпці.

На наведеному малюнку показані тільки два верхніх рівня ієрархії, в той час як структура продовжуеться і на більш низькі рівні. Так, в сімействі images [] може матитися декілька елементів-малюнків, а сімейство forms [] включає в себе дочірні об'єкти elements []. Маніпулювання різними компонентами Web-сторінок – це фактично маніпулювання елементами різних сімейств об'єкта document. Тому дуже важливо знати, як отримати доступ до потрібного елементу в ієрархічній структурі. Кожен об'єкт в ієрархічній структурі відноситься до того чи іншого сімейства. Усередині сімейства об'єкту присвоюється порядковий номер (індекс) і може бути присвоєно ім'я (ідентифікатор). Порядкові номери записуються так само, як номери елементів масиву, наприклад, images [0] (перший малюнок в документі) або frames [1] (другий фрейм). Нумерація елементів сімейств, як і нумерація в масивах JavaScript, починається з 0.

Щоб отримати доступ до об'єкта, потрібно вказати об'єкт верхнього рівня, тобто document, і потім через точку записати шлях по ієрархічній структурі до самого об'єкту, наприклад:

document.images [1]

document.forms [0].elements [2]

Тут elements [] позначає масив елементів форми forms [0]. Зрозуміло, що масив elements [] може мати й інше ім'я, вибране розробником. Більш того, замість звернення через порядковий номер елемента в масиві можна отримати доступ, використовуючи ідентифікатори елементів і масивів, наприклад, document.forms [0] .originalButton абоdocument.myForm.originalButton Використання ідентифікаторів зручно, коли ви маєте справу з великим документом. У цьому випадку посилання на елементи за допомогою індексів масивів можуть заплутати розробника.

Рисунок 7.1 – Об'єктна модель документа DOM0

7.1.1 Сімейства, властивості і методи

Сімейства об'єкта document безпосередньо пов'язані з елементами документа. Так, сімейство all включає в себе всі елементи, що знаходяться в файлі HTML, сімейство anchors містить всі закладки, forms – HTML-форми, наявні в документі, і т.д. Сімейства, відображені на Рис. 7.1, наприклад, frames або forms, присутні в об'єкті document завжди, незалежно від того, чи є фрейми або форми в даному документі.

Сімейства є масивами з кінцевим числом елементів, причому кількість елементів в сімействі визначається властивістю length. Щоб визначити загальну кількість елементів в HTML-документі, можете ввести в сценарій наступну команду:

alert(document.all.length);

Крім сімейств, об'єкт document містить властивості. Одне з них ми вже навели вище – це властивість title, яка містить рядок-заголовок документа. Перерахуємо інші властивості document:

• Location – повертає уніфікований покажчик ресурсу (в Netscape синонімом цієї властивості є URL);

• lastModified – рядок, який визначає дату і час останньої зміни, внесеної в документ: дату і час останньої зміни повертає також властивість fileModifiedDate;

• fileCreatedDate – повертає дату створення документа;

• fieUpdatedDate – повертає дату останнього оновлення файлу сервером;

• cookie – повертає список, що містить пари ім'я-значення, cookie - це невеликі масиви даних, які зберігаються браузером і пов'язані з певною Web-сторінкою або сервером. Властивість cookie дозволяє зчитувати, створювати, модифікувати і знищувати вказані дані;

• referrer – повертає URL ресурсу, з якого був виконаний перехід за гіперпосиланням до даного документу;

• bgColor – властивість для читання і запису, яке повертає колір фону документа; цій властивості відповідає однойменний атрибут в тезі <BODY>;

• fgColor – властивість, що відповідає кольору тексту документа і подане атрибутом text в тезі <BODY>;

• linkColor – властивість для читання і запису, яке відповідає кольору гіперпосилання;

• в тезі <BODY> цій властивості відповідає атрибут link, який за замовчуванням вважається рівним blue (# 0000FF);

• alinkColor – властивість, що повертає колір активного гіперпосилання і має еквівалент alink в тезі <BODY> (в Internet Explorer не підтримується); за замовчуванням властивість alinkColor повертає значення red (# FF0000);

• vlinkColor – властивість, що відповідає кольору переглянутого гіперпосилання і атрибуту vlink в тезі <BODY>; за замовчуванням vlinkColor повертає значення purple (# 800080).

Кожне з наведених властивостей приймає значення рядка. Крім властивостей, об'єкт document включає в себе ряд методів, що дозволяють, наприклад, динамічно виводити текст документа, відкривати і закривати документ.

Модель DOM0 існувала де-факто році. З тих пір були введені нові теги, з'явилися нові браузери, які не повністю підтримують цю модель, тому в жовтні 1998 р. була прийнята рекомендація W3C по першому рівню DOM (DOM 1), а в листопаді 2000 р. прийнято рекомендації щодо другого рівня DOM (DOM 2), істотно розширює DOM 1.

Модель DOM2. У цій моделі документ HTML має ієрархію, визначену вкладеністю елементів: кореневий елемент (загальний предок) html, його нащадки – діти head, body, онуки title, h1 – і так далі.

мРисунок 7.2 – Об'єктна модель DOM2

Консорціум W3C стандартизованих DOM першого і другого рівнів (DOM 1 і DOM 2):

1. DOM 1 описує базове уявлення XML- і HTML – документів у вигляді дерев об'єктів.

2. DOM 2 розширює базові інтерфейси DOM 1 і додає до них підтримку подій і стилів.

Таким чином, DOM 2 включає в себе DOM 1. Основні інтерфейси описані в DOM 2 Core: http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113

Специфіка HTML відображена в DOM 2 HTML: http://www.w3.org/TR/DOM-Level-2-HTML

Ці специфікації вельми складні. Крім того, вони описують якийсь ідеал, який на практиці реалізований не в повній мірі. На практиці робота здійснюється з об'єктною моделлю конкретного браузера. Браузер, будучи програмою для відображення документа, доповнює DOM власними об'єктами, властивостями, методами, подіями, колекціями. Наприклад, об'єкт window – вікно браузера.

DOM рівня 2 був опублікований в кінці 2000 року. Він ввів функцію «getElementById», а також модель подій і підтримку XML: namespace і CSS. DOM рівня 3 — поточна версія специфікації DOM, опублікована у квітні 2004 року, додала підтримку XPath та обробку подій клавіатури, а також інтерфейс для серіалізації документа XML.

У 2005 році велика частина W3C DOM підтримувалася основними браузерами, що задовольняють ECMAScript, включаючи Internet Explorer версії 6 (2001 рік), Opera, Safari і браузери, засновані на Gecko (у тому числі Mozilla, Firefox, Mozilla і Camino).

Веб-браузери не зобов'язані використовувати DOM, щоб виконувати HTML-документ. Однак DOM потрібно для скриптів JavaScript, які бажають спостерігати або змінювати веб-сторінку динамічно. Іншими словами, Document Object Model – це інструмент, з допомогою якого JavaScript бачить вміст HTML-сторінки і стан браузера.