- Пример DOM
- Ещё узлы
- Исследование DOM с помощью инструментов разработчика
- Возможности, которые дает DOM
- Итого
Согласно DOM-модели, документ является иерархией, деревом.
Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».
Проще говоря, DOM — это представление документа в виде дерева тегов, доступное для изменения через JavaScript.
Пример DOM
Построим, для начала, дерево DOM для следующего документа.
<html>
<head>
<title>О лосях</title>
</head>
<body>
Правда о лосях
</body>
</html>
В этом дереве выделено два типа узлов.
- Теги образуют узлы-элементы (element node) DOM-дерева. Естественным образом одни узлы вложены в другие.
- Текст представлен текстовыми узлами. Текстовые узлы не могут иметь потомков.
Структура дерева образована за счет синих элементов-узлов — тегов HTML.
Ещё узлы
Дополним страницу новыми тегами и комментарием:
<!DOCTYPE HTML>
<html>
<head>
<title>О лосях</title>
</head>
<body>
Правда о лосях
<ol>
<li>Лось — животное хитрое</li>
<!-- комментарий -->
<li>..и коварное!</li>
</ol>
</body>
</html>
В этом примере появился узел нового типа — узел-комментарий. Казалось бы, зачем комментарий в DOM? На отображение-то он всё равно не влияет. Но так как он есть в HTML — обязан присутствовать в DOM-дереве.
Всё, что есть в HTML, находится и в DOM.
Как вы думаете, пробелы и переводы строки между тегами должны попадать в DOM ?
Элемент с пробелами <li> </li> чем-то должен отличаться от <li></li> в DOM ?
Поскольку DOM-модель в точности соответствует документу, пробельные символы так же важны, как и любой другой текст. Ответ на оба вопроса: «Да».
На картинке выше текстовые узлы, содержащие пробелы, выделены серым.
Пробелы и переносы строки между тегами становятся пробельными узлами. Если не будет пробелов между тегами — не будет и пробельных узлов.
Например: <li></li> — узел-элемент без потомков.
Следующий пример вообще не содержит пробельных узлов:
<!DOCTYPE HTML><html><head><title>Title</title></head><body></body></html>
IE до версии 9 не генерировал узлы из пробелов. Это очень важно, т.к. приводит к тому, что DOM-дерево в IE6,7,8 не такое как в остальных браузеров.
Точнее говоря, оно такое же, как на картинке выше, но без пробельных узлов.
Это различие следует иметь в виду при разработке под IE<9.
Вообще-то это секрет, но DOCTYPE тоже является DOM-узлом, и находится в дереве DOM слева от HTML (на рисунке выше этот факт скрыт).
P.S. Насчет секрета - конечно, шутка, но об этом и правда далеко не все знают. Сложно придумать, где такое знание может пригодиться…
Исследование DOM с помощью инструментов разработчика
Изучать DOM можно с помощью инструментов разработки, встроенных в браузер.
Например:
- Откройте losi.html.
- Откройте Firebug или любой другой инструмент разработчика.
- Перейдите на вкладку HTML в Firebug или Elements в Safari/Chrome или…в общем, вы поняли.
- Смотрим на DOM, сворачиваем-разворачиваем узлы.
В инструментах разработчика не отображаются пробельные узлы.
Это сделано для удобства просмотра. На самом-то деле они есть.
Возможности, которые дает DOM
Зачем, кроме красивых рисунков, нужна иерархическая модель DOM?
DOM нужен для того, чтобы манипулировать страницей — читать информацию из HTML, создавать и изменять элементы.
Например, можно поменять цвет BODY и вернуть обратно:
document.body.style.backgroundColor = 'red';
alert('Поменяли цвет BODY');
document.body.style.backgroundColor = '';
alert('Сбросили цвет BODY');
Фактически, DOM предоставляет возможность делать со страницей всё, что угодно.
Итого
- DOM-модель — это внутреннее представление HTML-страницы в виде дерева.
- Все элементы страницы, включая теги, текст, комментарии, являются узлами DOM.
- У элементов DOM есть свойства и методы, которые позволяют изменять их.
-
Кстати, DOM-модель используется не только в JavaScript, это известный способ представления XML-документов.
В следующих главах мы лучше познакомимся с DOM и увидим, какие свойства и методы нужны, чтобы творить красивые штуки со страницей.
Комментарии
- Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
- Если ваш комментарий касается задачи -- откройте её в отдельном окне и напишите там.
- Комментарии без смысла, с рекламой или не о статье вообще - удаляются.