Объектная модель документаПрограммы, написанные на JavaScript, могут запускаться всюду, где установлена виртуальная JavaScript-машина. В основном – это браузеры и серверы, на которых установлен пакет Node.js. При этом, рассмотренные ранее, базовые конструкции языка должны одинаково выполняться в разных окружениях. Но каждое конкретное окружение дает некоторые дополнительные возможности. Например, при запуске JavaScript в браузере, мы имеем возможность управлять содержимым HTML-документа. А при выполнении скрипта на сервере, у него появляются дополнительные функции для работы с сетевыми запросами. Начиная с этого занятия, мы будем рассматривать работу JavaScript в браузерной среде. В этом случае нам становится доступной:
Во главе всех этих объектов стоит корневой объект window.
Причем, объект window глобальный также и для JavaScript. Например, используя объект window, мы можем получить высоту клиентской области браузера (в пикселах): console.log(window.innerHeight); а через объект document изменить стиль тега body: document.body.style.background = "green"; через navigator получить сведения о платформе, на которой запущен браузер: console.log(navigator.platform); и так далее. Объекты DOM и BOM предоставляют функционал для работы с браузером и HTML-документом. И пришло время познакомиться с ними поближе. Дерево DOMКак мы только что увидели, DOM представляет информацию HTML-документа в виде набора объектов. Например, document.body – это объект тега <body>. И так для всех тегов и их содержимых. Предположим, что у нас имеется вот такая HTML-страница: <!DOCTYPE html> <html> <head> <title>Уроки по JavaScript</title> </head> <body>Дерево DOM</body> </html> Ее структура в виде DOM элементов будет выглядеть так:
Здесь Каждый узел этого дерева – это объект. Соответственно, HTML – корневой узел, а HEAD и BODY – его дочерние элементы. Текст внутри элементов образует текстовые узлы (#text). Например, после тега <html> идет перевод на следующую строку – это элемент #text. После тега <head> также имеется перевод на следующую строчку с символом табуляции. И так далее. Все текстовые элементы обозначаются соответствующими узлами #text. Если при построении дерева DOM браузер выявляет ошибки HTML-разметки, то он автоматически их корректирует и дерево создается всегда с корневым узлом HTML. Например, если мы создадим вот такой документ: Дерево DOM то браузер его автоматически достроит до вот такого:
Если имеются какие-либо не закрытые теги (обычно это тег <p>), то в DOM-дереве все теги будут закрыты автоматически (правда, теги лучше закрывать при разметке, чтобы автоматическое закрытие не привело к ошибкам интерпретации HTML-документа). Однако, в некоторых случаях автоматическое достроение дерева оказывается весьма полезным инструментом. Например, по стандарту DOM каждая таблица должна помещаться в тег <tbody>, но мы его обычно не пишем (это разрешено официально стандартом) и браузер добавляет его автоматически. Например: <table><tr><td>ячейка</td></tr></table> на уровне DOM выглядит так:
Эти моменты важно знать, чтобы избежать «сюрпризов» при работе с элементами через DOM. Помимо тегов и текстовых полей в DOM есть еще один важный элемент – это комментарий. Да, комментарии тоже помещаются в DOM. Почему? Дело в том, что при построении дерева браузер руководствуется правилом: все что есть в HTML-документе должно быть в DOM. Поэтому и комментарии тоже помещаются в него. Например, вот такой наш прежний документ с комментарием: <!DOCTYPE html> <html> <head> <title>Уроки по JavaScript</title> </head> <body> <!-- комментарий --> Дерево DOM </body> </html> Будет выглядеть так:
По идее директива <!DOCTYPE html> тоже помещается в это дерево как самый верхний узел, но мы ее не будем изображать для экономии пространства и времени. Формально дерево DOM содержит 12 различных типов узлов. Но мы, в основном, будем использовать такие:
Чтобы увидеть дерево DOM в браузере, нужно открыть вкладку «Elements». Правда, дерево здесь отображается в несколько ином виде (текстовые узлы без полезной информации не показываются), но этого вполне достаточно, чтобы видеть его общую структуру. |
- символ
перевода строки (спецсимвол \n в JavaScript); \t – символ
табуляции.
