Окружение: DOM, BOM и JS

Браузер дает доступ к иерархии объектов, которые мы можем использовать для разработки. Всего есть три главных вида таких объектов.

Глобальная структура

На рисунке схематически отображена структура основных браузерных объектов.

На вершине стоит window, который еще называют глобальным объектом.

Все остальные объекты делятся на 3 группы.

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

Доступна через document. Дает доступ к содержимому страницы.

На странице W3C DOM вы можете найти стандарты DOM, разработанные самим W3C. На данный момент существует 3 уровня DOM. Современные браузеры также поддерживают некоторые возможности, которые называются DOM 0 и которые остались еще с той эпохи, когда не было W3C.

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

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

Доступ к фреймам, запросы к серверу, функции alert/confirm/prompt —- все это BOM.

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

Объекты и функции JavaScript

Javascript - связующий все это язык. Встроенные в него объекты и сам язык в идеале должны соответствовать стандарту ECMA-262, но пока что браузеры к этому не пришли. Хотя положительная тенденция есть.

Глобальный объект window имеет две роли:

1. Это окно браузера. У него есть методы window.focus(),window.open() и другие.
2. Это глобальный объект JavaScript.

Вот почему он на рисунке представлен зеленым и красным цветом.

navigator: платформа и браузер

Объект navigator содержит общую информацию о браузере и операционной системе. Особенно примечательны два свойства:

• navigator.userAgent — содержит информацию о браузере.
• navigator.platform — содержит информацию о платформе, позволяет различать Windows/Linux/Mac и т.п..

Для вашего браузера значения:

alert(navigator.userAgent);
alert(navigator.platform);

С другой стороны, зачем нужно определять браузер? Если хочется проверить, поддерживает ли браузер какую-то возможность, то всегда лучше провести проверку так, чтобы не зависеть от названия браузера.

Тогда в будущем, когда браузер добавит новую возможность, ваш скрипт тут же подхватит её и продолжит работать.

Но бывает (редко), что под определенными платформами, в некоторых версиях браузеров есть ошибки (да-да, в самих браузерах), и никак кроме проверки на название/платформу это не обнаружить. Поэтому такую возможность стоит иметь в виду.

screen

Объект screen содержит общую информацию об экране, включая его разрешение, цветность и т.п. Оно может быть полезно для определения, что код выполняется на мобильном устройстве с маленьким разрешением.

Текущее разрешение экрана посетителя по горизонтали/вертикали находится в screen.width/screen.height.

Разрешение у вас сейчас:

JavaScript-код счетчиков считывает эту информацию и отправляет на сервер. Именно поэтому можно просматривать в статистике, сколько посетителей приходило с каким экраном.

location

Объект location предоставляет информацию о текущем URL и позволяет JavaScript перенаправить посетителя на другой URL. Значением этого свойства является объект типа Location.

Методы и свойства Location

Самый главный метод — это, конечно же, toString. Он возвращает полный URL.

Следующая кнопка выведет текущий адрес:

alert(window.location)

Код, которому нужно провести строковую операцию над location, должен сначала привести объект к строке. Вот так будет ошибка:

// будет ошибка, т.к. location - не строка 
alert( window.location.indexOf('://') );

// привели к строке перед indexOf
alert( (window.location + '').indexOf('://') );

Все следующие свойства являются строками.
Колонка «Пример» содержит их значения для тестового URL:

• http://www.google.com:80/search?q=javascript#test

Методы объекта Location

assign(url)

загрузить документ по данному url. Можно и просто приравнять window.location.href = url.

reload([forceget])

перезагрузить документ по текущему URL. Аргумент forceget - булево значение, если оно true, то документ перезагружается всегда с сервера, если false или не указано, то браузер может взять страницу из своего кэша.

replace(url)

заменить текущий документ на документ по указанному url. Разница, по сравнению с assign() заключается в том, что после использования replace() страница не записывается в истории посещений. В частности, это значит, что посетитель не сможет использовать для возврата кнопку браузера «Назад».

toString()

Как обсуждалось выше, возвращает строковое представление URL.

При изменении любых свойств window.location, кроме hash, документ будет перезагружен, как если бы для модифицированного url был вызван метод window.location.assign().

Можно перенаправить и явным присвоением location, например:

// браузер загрузит страницу http://javascript.ru
window.location = "http://javascript.ru";

Следующий код выведет все свойства текущего location:

for (var prop in location){
  alert(prop + ': ' + location[prop]);
}

Еще пример. Перезагрузит страницу с новыми параметрами после "?":

function refreshSearch(search) {
  window.location.search = search;
}

При вызове refreshSearch('My Data') на сервер отправится строка
с параметрами «?My%20Data».

frames

Коллекция, содержащая фреймы и ифреймы. Можно обращаться к ним как по номеру, так и по имени.

В frames содержатся window-объекты дочерних фреймов.

Следующий код переводит фрейм на новый URL:

<iframe name="google" src="http://google.com" width="200" height="100"></iframe>

<script>
*!*
  window.frames.google.location = 'http://yandex.ru';
*/!*
</script>

Фреймы и безопасность

Политика безопасности браузера устроена так, что окно может обращаться к переменным фрейма напрямую лишь в том случае, если находится на одном с ним домене (включая тот же протокол и порт).

То есть, прочитать frames.google.location и узнать, таким образом, по какому адресу находится посетитель внутри ифрейма, мы бы не смогли. Но, в качестве исключения, присвоить это свойство можно.

history

Объект history позволяет менять URL без перезагрузки страницы (в пределах того же домена) при помощи History API, а также перенаправлять посетителя назад-вперед по истории. Эта тема достаточно обширна, поэтому будет раскрыта в отдельной главе.

Объект history не предоставляет возможности читать историю посещений. Можно отправить посетителя назад вызовом history.back() или вперед вызовом history.forward(), но сами адреса браузер не дает из соображений безопасности.

Итого

Браузерное окружение состоит из трёх основных частей:

• DOM — для работы с HTML/XML документами.
• BOM — различный браузерный функционал.
• JavaScript-объекты.

В следующих главах мы познакомимся с ними подробнее.