Об'єктна модель документа (dom)
Об'єктна модель документа (Document Object Model – DOM) є стандартом, запропонованим веб-сервером-консорціумом і регламентує спосіб представлення вмісту документа (зокрема веб-сторінки) у вігляді набору об'єктів. Під вмістом розуміється все, що може знаходитися на веб-сторінці: малюнки, заслання, абзаци, текст і так далі. Відмінністю від об'єктної моделі браузера (BOM), яка унікальна для кожного браузера, об'єктна модель документа є стандартом і повинна підтримуватися всіма браузерами. І хоча на практиці підтримка DOM реалізована не повною мірою, проте необхідно слідувати вимогам цього стандарту як виробникам браузерів, так і розробникам веб-сайтів. Слід зауважити, що DOM може застосовуватися не лише у веб-сторінках, але і в будь-яких інших документах. Зокрема, вона може використовуватися з будь-якими словниками XML, причому одним з таких словників є HTML, а точніше, XHTML. DOM є стандартом, що розвивається, і має три рівні. Перший рівень є першою версією стандарту і поки що єдиною закінченою. Він складається з двох розділів: перший є ядром і визначає принципи маніпуляції із структурою документа (генерація і навігація), а другою присвячений виставі в DOM елементів HTML, визначуваних однойменними тегами. Другий і третій рівні описують модель подій, доповнюють таблиці стилів, шлях по структурі.
Представлення документа у вигляді деревовидної структури
В DOM документ представляється у вигляді деревовидної структури (див. Рисунок ), що є одніею з найбільш споживчих структур в програмуванні. Це забезпечує уніфікований спосіб навігації по документу.
Рисунок HTML – документ у вигляді деревовидної структури
Навігація по документу
В моделі DOM до елементу можна звернутися безпосередньо по його ідентифікатору id, скориставшись методом getelementbyid об'єкту Document:
<html>
<head>
<title>Основы DOM</title>
</head>
<body>
<h1 id = "head">Основы DOM</h1>
<p>A Text</p>
<script language = "JavaScript">
var a = document.getElementById("head");
alert(a);
</script>
</body>
</html>
Для получения коллекции всех элементов, соответствующих какому-либо тегу, используется метод объекта Document – getElementsByTagName. Например, var a = document.getElementsByTagName("TD") присвоит переменной a коллекцию всех элементов <td>. Обратите внимание, что имя элемента следует писать прописными буквами ("TD"). Рассмотрим пример использования метода getElementsByTagName:
<html>
<head>
<title>Основы DOM</title>
</head>
<body>
<h1 id = "head">Основы DOM</h1>
<table border = "2">
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
</table>
<script language = "JavaScript">
var a = document.getElementsByTagName("TD");
a.item(0).style.color = "red";
a.item(3).style.fontFamily = "arial";
a.item(3).style.color = "green";
</script>
</body>
</html>
Щоб скористатися перевагою деревовидної структури, прийнятої в DOM для представлення документа, слід використовувати навігаційні атрибути (мал. 20), представлені в таблиці. 11.
Рисунок Навігаційні атрибути об'єкту Node
Табл. Навигационные атрибуты объекта Node
firstChild |
Возвращает первый узел-потомок |
lastChild |
Возвращает последний узел-потомок |
previousSibling |
Возвращает предыдущий соседний узел, имеющий с текущим одного родителя |
nextSibling |
Возвращает следующий соседний узел, имеющий с текущим одного родителя |
parentNode |
Возвращает родительский узел |
ownerDocument |
Возвращает корневой узел документа, содержащий текущей узел |
nodeName |
Возвращает имя узла |
nodeValue |
Возвращает значение узла в текстовом формате |
nodeType |
Возвращает тип узла в виде числа |
firstChild |
Возвращает первый узел-потомок |
У наступному прикладі здійснюється прохід по деревовидній структурі документа:
html>
<head>
<title>Навигация по документу</title>
</head>
<body>
<h1>Изучение навигации по документу</h1>
<p>Абзац 1</p>
<p>Абзац 2</p>
<script language = "JavaScript">
var temp = document.documentElement;
temp = temp.firstChild;
alert(temp.tagName);
if(temp.nextSibling == 3)
temp = temp.nextSibling.next.Sibling;
else
temp = temp.nextSibling;
alert(temp.tagName);
temp = temp.firstChild;
alert(temp.tagName);
temp.style.color = "red";
if(temp.nextSibling == 3)
temp = temp.nextSibling.nextSibling;
else
temp = temp.nextSibling;
alert(temp.tagName);
temp.style.color = "blue";
temp = temp.parentNode;
alert(temp.tagName);
</script>
</body>
</html>
Динамическая генерация веб-страниц средствами DHTML на основе DOM
Иногда требуется динамически формировать веб-страницы, например, в случае создания чатов, форумов, либо динамически создаваемых веб-страниц, содержимое которых хранится в базе данных. DOM позволяет решить такую задачу.
Для создания объектов у объекта Document имеются следующие методы (табл. 12):
Методы объекта Document, позволяющие создавать объекты
Метод |
Описание |
createElement(имя_элемента) |
Создает новый узел элемента с указанным именем |
createTextNode(текст) |
Создает текстовый узел с указанным текстом |
createAttribute(имя_атрибута) |
Создает новый узел атрибута с указанным именем |
Вновь созданные объекты добавляются в структуру документа при помощи методов объекта Node (табл. 13):
Таблица 13
Методы объекта Node, добавляющие и удаляющие элементы документа
Метод |
Описание |
appendChild(новый_узел) |
Добавляет объект Node в конец списка узлов-потомков |
cloneNode(потомок-опция) |
Создает объект Node, идентичный указанному в аргументе. В качестве аргумента можно использовать и все узлы-потомки одновременно |
hasChildNodes() |
Возвращает true, если узел имеет потомков |
insertBefore(новый_узел, текущий_узел) |
Вставляет объект Node в список потомков перед узлом, указанным в качестве второго параметра |
removeChild(узел-потомок) |
Удаляет узел-потомок, указанный в качестве параметра |
replaceChild(новый_потомок, старый_потомок) |
Заменяет старого потомка на нового |
Приведем пример динамической генерации документа средствами DOM (рис. 21).
Рис. 21. Динамически сгенерированная веб-страница
<html>
<head>
<title>Пример динамической генерации документа</title>
</head>
<body>
<script language = "JavaScript">
var newText;
var newElem;
newText = document.createTextNode("Приклад
динмического создания HTML-документа");
newElem = document.createElement("H1");
newElem.appendChild(newText);
document.body.appendChild(newElem);
newText = document.createTextNode("Абзац");
newElem = document.createElement("P");
newElem.appendChild(newText);
document.body.appendChild(newElem);
</script>
</body>
</html>
Для чтения и установки атрибутов используются следующие методы объекта Element (табл. 14).
Панель меню
Панель меню розташована у верхній частині екрану і складається з 13 меню що розкриваються (див. додаток А). В останніх версіях редактора 3ds Max меню File (Файл) відображається у вигляді логотипу редактора Application button (Кнопка додатки), а частина його елементів винесена на панель Quick Access Toolbar (Панель швидкого доступу) в лівому верхньому кутку інтерфейсу (див. рис. 2.3.2) [2].
Рисунок 2.3.2 – Панель меню
де, 1 – меню команд для редагування та перегляду файлів; 2 – створення нової сцени; 3 – відкриття сцени; 4 – збереження сцени; 5 – скасувати, повторити дію.