Основы использования объектной модели браузера онлайн урок.


BOM (Browser Object Model) - это специальная древовидная структура, которая моделирует браузер и его вкладки в контексте объектов. Каждая вкладка - это объект под названием window.

Объект window в свою очередь имеет дочерние объекты, в которые входят:

  • DOM - элементы объектной модели документы, т.е. объект document
  • непосредственно объекты JS
  • screen - содержит информацию о свойствах экрана пользователя, например разрешение экрана
  • location - содержит информацию о URL текущего документа. С помощью этого объекта можно открывать в окне новые веб-документы
  • history - представляет информацию истории просмотров в окне
  • navigator - объект, содержащий информацию о браузере
  • frames- содержит коллекцию фреймов на странице




Рассмотрим несколько примеров использования этих объектов.

Когда мы пишем document.getElementById('some-id') то на самом деле мы обращаемся к объекту window в самом начале. Это просто сокращенная запись:

var element = window.document.getElementById('some-id');


Для определения разрешения экрана пользователя, можно обратиться к объекту screen:



В результате, в консоли будет выведены целые числа, которые в пикселях дают разрешение экрана.

Для перенаправления пользователя можно использовать объект location:

window.location.href = 'http://google.com';


Когда интерпретатор обработает эту строку, выполнится перенаправление на указанный адрес и во вкладке загрузится соответствующая страничка.

Для того, чтобы открыть предыдущий веб-документ текущей вкладке, можно использовать метод back() объекта history

window.history.back();


Узнать информацию о браузере пользователя можно при помощи свойства userAgent объекта navigator

var agent = window.navigator.userAgent;
console.log(agent);


Результатом будет, например, следующая строка

Mozilla/5.0 (Windows NT 6.1; rv:37.0) Gecko/20100101 Firefox/37.0