Browser environment

The browser provides us with a hierarchy of objects which we can use to control and access various information about time, screen, page, elements on a page etc.

The global structure

The browser provides access to a large hierarchy of objects for developers to manipulate. You can see a part of it below:

On the top is the window, also called global object.

All other objects form 3 groups.

Document Object Model (DOM)

document and related objects allow to access contents of the page, modify elements etc. Most interaction with HTML is handled here.

There is a pack of standards for DOM, developed by W3C. You can find it at W3C DOM page. There are three levels of DOM, each level expands on the previous. Modern browsers generally support pre-W3C features from the browser dark-ages, called DOM 0.

Browser Object Model (BOM)

BOM is a pack of objects that allow to control the browser, e.g change current URL, access frames, do background requests to server with XMLHttpRequest etc. Functions like alert,confirm,prompt also belong BOM, they are provided by the browser.

Many BOM features are standartized in HTML5, but not all.

JavaScript objects and functions

JavaScript itself is a language which gives us access to DOM, BOM and provides objects and functions of its own.

JavaScript follows the ECMA-262 standard.

The global window object mixes browser window functionality (methods focus(),open() etc) with being a JavaScript global object. That’s why it is both green and red.

Summary

While this information is theoretical, the terms are always good to know.

It is advisable that you read DOM and other standards as it helps when problem solving and serves general educational purposes.

And, by the way, the components can be used separately.

• JavaScript is a general purpose language, you can use it in command line, build a Node.JS-based server in it.
• BOM and DOM can be controlled by an external program or a plugin, using browser API, not just with JavaScript. E.g Webdriver unit-testing framework works like that.
• DOM is also used for XML documents, not just HTML, and of course not limited to frontend