HTML DOM (Document Object Model)

Во время загрузки страницы, браузер создает объектную модель документа, которую чаще называют словом DOM по сокращению англоязычного названия: Document Object Model. Рассмотрим порядок работы браузера во время отображения страницы. На рисунке 76 представлена схема работы браузера со страницей HTML.

Рисунок 76 - Схема работы браузера со страницей HTML

Основным инструментом для работы и динамических изменений на странице является DOM - объектная модель, используемая для XML/HTML-документов. Использование объектной модели в JavaScript позволяет создавать динамичные и интерактивные страницы.

Используя объектную модель, с помощью JavaScript можно:

динамически изменять элементы HTML

Динамически изменять атрибуты тегов

Динамически изменять все CSS документа

Удалять теги и атрибуты страницы

Добавлять новые теги и атрибуты

Взаимодействовать со всеми событиями, происходящими на странице

Создавать новые события

Прежде чем начать работу со страницей с использованием объектной модели, разберемся с определениями DOM и HTML DOM.

DOM – это стандарт консорциума WWW, определяющий порядок работы с объектной моделью документа.

Консорциум дает следующее определение DOM:

DOM – это платформа и интерфейс, позволяющий программам и скриптам динамически получать и обновлять содержимое, структуру и стиль web-документа.

Существует четыре уровня DOM, это связано с историей развития объектной модели.

Нулевой уровень DOM был определен в далеком 1996 году. Включал этот уровень в основном коллекции: document.images, document.forms, document.layers и document.all. Эти коллекции не включаются в основные спецификации DOM, разработанные W3C. Данные коллекции представляют интерес с исторической точки зрения и отвечают на вопрос, что было до появления стандартов W3C.

Первым стандартом DOM от W3C стал DOM уровень 1. В нем были описаны интерфейсы для работы с XML и HTML, Некоторые элементы DOM 1 используются до сих пор, например:

document.forms,

document.images,

document.write

В 2000 году был выпущен новый стандарт DOM Уровень 2, этот стандарт активно используется и сейчас, очень многое из этого стандарта было принято за основу разработчиками HTML5. Не смотря на наличие DOM уровень 3, DOM Уровень 2 используется как основной стандарт от W3C.

Стандарт DOM уровень 2 состоит из трех частей:

Ядро DOM – стандартная модель для всех типов документа

XML DOM –стандартная модель для XML документов

HTML DOM –стандартная модель для HTML документов и программный интерфейс для HTML, определяющий:

HTML элементы как объекты

свойства всех элементов HTML

Методы доступа к элементам HTML

События элементов HTML

Другими словами: HTML DOM- это стандарт, определяющий способы доступа, изменения, удаления HTML элементов.

DOM Уровень 3 – это последняя на данный момент версия стандарта DOM от W3C. Данная версия была принята в 2009 года, не смотря на это, поддерживается этот стандарт крайне слабо, браузеры только начинают понимать свойства и методы этого стандарта.

Построение дерева DOM

Согласно DOM-модели, документ является иерархией.

Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста - текстовый элемент, и т.п. Рассмотрим построение простого дерева DOM на примере следующего документа:

<! DOCTYPE html>

< html>

< head>

< title> Главная Страница< /title>

< /head>

< body>

< /body>

< /html>

При построении дерева DOM, теги образуют узлы-элементы (element node). Текст представлен текстовыми узлами (text node). И то и другое – равноправные узлы дерева DOM. Тег < html> становится самым верхним узлом дерева DOM. У этого тега есть 2 дочерних элемента < head> и < body>, которые становятся дочерними узлами узла html. Тег < title> образует дочерний узел title. У узла body дочерним является текстовый узел " Hello, World! " . Получившиеся дерево DOM представлено на рисунке 77.

Рисунок 77 – Пример дерева DOM

Как видно из рисунка 77, в DOM представлены все элементы html страницы, кроме тега <! DOCTYPE html>. Тег <! DOCTYPE html> тоже образует узел DOM, однако традиционно не отображается в общем дереве DOM.

Рассмотрим построение дерева DOM для документа html с более разветвленной структурой.

<! DOCTYPE html>

< html>

< head>

< title> Главная Страница< /title>

< /head>

< body>

< p class=" first_class" > Нумерованный список< /p>

< ol id=" first_id" >

< li> Пункт 1 < /li>

< li> Пункт 2< /li>

< /ol>

< /body>

< /html>

В данном документе помимо тегов присутствуют еще и атрибуты тега, такие как class и id.

Атрибуты тега в объектной модели документа называются свойствами, которые меняют с использованием языка JavaScript.

Дерево DOM для этого документа представлено на рисунке 78.

Рисунок 78 – Пример дерева DOM

⇐ Предыдущая21222324252627282930Следующая ⇒

Поделиться:

Популярное:

1. Camera type Orientation type (model)
2. The Complex Object (Objective – with – the – Infinitive Construction).
3. Настоящее состояния больного (Status praesens objectivus)