DOM & BOM

Сам по себе язык JavaScript не предусматривает работы с браузером. Он вообще не знает про HTML. Но позволяет легко расширять себя новыми функциями и объектами.

Как видно из рисунка, на вершине стоитwindow.

У этого объекта двоякая позиция – он, с одной стороны, является глобальным объектом в JavaScript, с другой – содержит свойства и методы для управления окном браузера, открытия новых окон, например:

// открыть новое окно/вкладку с URL http://ya.ru
window.open('http://ya.ru');

Объектная модель документа (DOM)

Глобальный объектdocumentдает возможность взаимодействовать с содержимым страницы.

Пример использования:

document.body.style.background = 'red';
alert( 'Элемент BODY стал красным, а сейчас обратно вернётся' );
document.body.style.background = '';

Он и огромное количество его свойств и методов описаны в стандарте W3C DOM.

По историческим причинам, когда-то появилась первая версия стандарта DOM Level 1, затем придумали еще свойства и методы и появился DOM Level 2, на текущий момент поверх них добавили еще DOM Level 3 и готовится DOM 4.

Современные браузеры также поддерживают некоторые возможности, которые не вошли в стандарты, но де-факто существуют давным-давно, и отказываться от них никто не хочет. Их условно называют «DOM Level 0».

Также информацию по работе с элементами страницы можно найти в стандарте HTML 5.

Дерево DOM

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

Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст».

DOM – это представление документа в виде дерева объектов, доступное для изменения через JavaScript.

Пример DOM

Построим, для начала, дерево DOM для следующего документа.

<!DOCTYPE HTML>
<html>
<head>
  <title>О лосях</title>
</head>
<body>
  Правда о лосях
</body>
</html>

В этом дереве выделено два типа узлов.

Теги образуют узлы-элементы (element node). Естественным образом одни узлы вложены в другие. Структура дерева образована исключительно за счет них.
Текст внутри элементов образует текстовые узлы (text node), обозначенные как#text. Текстовый узел содержит исключительно строку текста и не может иметь потомков, то есть он всегда на самом нижнем уровне.

Пробелы и переводы строки – это тоже текст, полноправные символы, которые учитываются в DOM.

В частности, в примере выше тег<html>содержит не только узлы-элементы<head>и<body>, но и#text(пробелы, переводы строки) между ними.

Впрочем, как раз на самом верхнем уровне из этого правила есть исключения: пробелы до<head>по стандарту игнорируются, а любое содержимое после</body>не создаёт узла, браузер переносит его внутрь, в конецbody.

В остальных случаях всё честно – если пробелы есть в документе, то они есть и в DOM, а если их убрать, то и в DOM их не будет, получится так:

<!DOCTYPE HTML>
<html><head><title>О лосях</title></head><body>Правда о лосях</body></html>

Автоисправление

При чтении неверного HTML, браузер автоматически корректирует его для показа, также это происходит и при построении DOM.

В частности, всегда будет верхний тег<html>. Даже если в тексте нет – в DOM он будет, браузер создаст его самостоятельно.

То же самое касается и тега<body>.

Например, если файл состоит из одного слова"Привет", то браузер автоматически обернет его в<html>и<body>.

Другие типы узлов

Дополним страницу новыми тегами и комментарием:

<!DOCTYPE HTML>
<html>

<body>
  Правда о лосях
  <ol>
    <li>Лось — животное хитрое</li>
    <!-- комментарий -->
    <li>...и коварное!</li>
  </ol>
</body>

</html>

В этом примере тегов уже больше, и даже появился узел нового типа – комментарий.

Казалось бы, зачем комментарий в DOM? На отображение-то он все равно не влияет. Но так как он есть в HTML – обязан присутствовать в DOM-дереве.

Все, что есть в HTML, находится и в DOM.

Даже директива<!DOCTYPE...>, которую мы ставим в начале HTML, тоже является DOM-узлом и находится в дереве DOM непосредственно перед<html>. На иллюстрациях выше этот факт скрыт, поскольку мы с этим узлом работать не будем, он никогда не нужен.

Даже сам объектdocument, формально, является DOM-узлом, самым-самым корневым.

Всего различают 12 типов узлов, но на практике мы работаем с четырьмя:

Документ – точка входа в DOM.
Элементы – основные строительные блоки.
Текстовые узлы – содержат, собственно, текст.
Комментарии – иногда в них можно включить информацию, которая не будет показана, но доступна из JS.

Возможности, которые дает DOM

Зачем, кроме красивых рисунков, нужна иерархическая модель DOM?

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

УзелHTMLможно получить какdocument.documentElement, аBODY– как document.body.

Получив узел, мы можем что-то сделать с ним.

Например, можно поменять цветBODYи вернуть обратно:

document.body.style.backgroundColor = 'red';
alert( 'Поменяли цвет BODY' );

document.body.style.backgroundColor = '';
alert( 'Сбросили цвет BODY' );

Объектная модель браузера (BOM)

BOM – это объекты для работы с чем угодно, кроме документа.

Например:

Объект navigator содержит общую информацию о браузере и операционной системы. Особенно примечательны два свойства:navigator.userAgent– содержит информацию о браузере иnavigator.platform содержит информацию о платформе, позволяет различать Windows/Linux/Mac и т.п.
Объект location содержит информацию о текущем URL страницы и позволяет перенаправить посетителя на новый URL.
Функции alert/confirm/promptтоже входят в BOM.

Пример использования:

alert( location.href ); // выведет текущий адрес

Большинство возможностей BOM стандартизированы в HTML 5, хотя различные браузеры и предоставляют зачастую что-то свое, в дополнение к стандарту.

PreviousJS in Browser NextEvents

Last updated 6 years ago