Послание по JS № 6
Окружение: DOM, BOM и JS
Сам по себе язык JavaScript не предусматривает работы с браузером. Он вообще не знает про HTML. Но позволяет легко расширять себя новыми функциями и объектами.
На рисунке ниже схематически отображена структура, которая получается если посмотреть на совокупность браузерных объектов с «высоты птичьего полёта».
Как видно из рисунка, на вершине стоит window.
У этого объекта двоякая позиция – он с одной стороны является глобальным объектом в JavaScript, с другой – содержит свойства и методы для управления окном браузера, открытия новых окон, например:
// открыть новое окно/вкладку
window.open('https://google.com');
Объектная модель браузера (BOM)
BOM – это объекты для работы с чем угодно, кроме документа (нашего сайта).
К примеру, объект navigator содержит общую информацию о браузере и операционной системе. Особенно примечательны два свойства: navigator.userAgent – содержит информацию о браузере и navigator.platform – содержит информацию о платформе, позволяет различать Windows/Linux/Mac и т.п.
Объект location содержит информацию о текущем URL страницы и позволяет перенаправить посетителя на новый URL.
Функции alert/confirm/prompt – тоже входят в BOM.
Пример использования:
alert(location.href); // выведет текущий адрес
Модель BOM конечно интересна, но для нас больший интерес представляет DOM.
Дерево DOM
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель документа.
Согласно DOM, документ является иерархией (деревом). Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами.
Важно!
DOM – это представление документа в виде дерева объектов, доступное для изменения через JavaScript.
Пример DOM
Построим, для начала, дерево DOM для следующего документа.
<!DOCTYPE HTML>
<html>
<head>
<title>О лосях</title>
</head>
<body>
Правда о лосях
</body>
</html>
В этом дереве выделено два типа узлов:
1. Первые — это теги, они образуют узлы-элементы (element node). Естественным образом одни узлы вложены в другие. Структура дерева образована исключительно за счет них.
2. Вторые — это текст внутри элементов, они образуют текстовые узлы (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>.
При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.
Всё, что есть в HTML, находится и в DOM.
Даже директива <!DOCTYPE...>, которую мы ставим в начале HTML, тоже является DOM-узлом, и находится в дереве DOM перед <html>. На иллюстрациях выше этот факт скрыт, поскольку мы с этим узлом работать не будем, он никогда не нужен.
Даже сам объект document, формально, является DOM-узлом (самым корневым).
Всего различают 12 типов узлов, но на практике мы работаем с четырьмя из них:
· Документ – точка входа в DOM.
· Элементы – основные строительные блоки.
· Текстовые узлы – содержат, собственно, текст.
· Комментарии – иногда в них можно включить информацию, которая не будет показана, но доступна из JS.