A host environment provides platform-specific objects and functions additionally to the language core. Web browsers give means to control web pages. Node.JS provides server-side features, and so on.
There’s a “root” object called
window. It has two roles:
- Second, it represents the “browser window” and provides methods to control it.
For instance, here we use it as a global object:
And here we use it as a browser window, to see the window height:
There are more window-specific methods and properties, we’ll cover them later.
document object gives access to the page content. We can change or create anything on the page using it.
Here we used
document.body.style, but there’s much, much more. Properties and methods are described in the specification. By chance, there are two working groups who develop it:
- W3C – the documentation is at https://www.w3.org/TR/dom.
- WhatWG, publishing at https://dom.spec.whatwg.org.
As it happens, the two groups don’t always agree, so we have like 2 sets of standards. But they are in the tight contact and eventually things merge. So the documentation that you can find on the given resources is very similar, there’s like 99% match. There are very minor differences, you probably won’t notice them.
Personally, I find https://dom.spec.whatwg.org more pleasant to use.
In the ancient past, there was no standard at all – each browser implemented whatever it wanted. So different browsers had different sets methods and properties for the same thing, and developers had to write different code for each of them. Dark, messy times.
Even now we can sometimes meet old code that uses browser-specific properties and works around incompatibilities. But in this tutorial we’ll use modern stuff: there’s no need to learn old things until you really need those (chances are high you won’t).
Then the DOM standard appeared, in an attempt to bring everyone to an agreement. The first version was “DOM Level 1”, then it was extended by DOM Level 2, then DOM Level 3, and now it’s DOM Level 4. People from WhatWG group got tired of version and are calling that just “DOM”, without a number. So will do we.
The DOM specification explains the structure of a document and provides objects to manipulate it. There are non-browser instruments that use it too.
For instance, server-side tools that download HTML pages and process them. They may support only a part of the DOM specification though.
CSS rules and stylesheets are structured not like HTML. So there’s a separate specification CSSOM that explains how they are represented as objects, how to read and write them.
Browser Object Model (BOM) are additional objects provided by the browser (host environment) to work with everything except the document.
- navigator object provides background information about the browser and the operation system. There are many properties, but two most widely known are:
navigator.userAgent– about the current browser, and
navigator.platform– about the platform (can help to differ between Windows/Linux/Mac etc).
- location object allows to read the current URL and redirect the browser to a new one.
Here’s how we can use the
alert/confirm/prompt are also a part of BOM: they are directly not related to the document, but represent pure browser methods of communicating with the user.
Talking about standards, we have:
- DOM specification
- Describes the document structure, manipulations and events, see https://dom.spec.whatwg.org.
- CSSOM specification
- Describes stylesheets and style rules, manipulations with them and their binding to documents, see https://www.w3.org/TR/cssom-1/.
- HTML specification
- Describes HTML language (tags etc) and also BOM (browser object model) – various browser functions:
locationand so on, see https://html.spec.whatwg.org. It takes DOM specification and extends it with many additional properties and methods.
Now we’ll get down to learning DOM, because the document plays the central role in the UI, and working with it is the most complex part.
Please note the links above, because there’s so many stuff to learn, it’s impossible to cover and remember everything.
When you’d like to read about a property or a method – the Mozilla manual at https://developer.mozilla.org/en-US/search is a nice one, but reading the corresponding spec may be better: more complex and longer to read, but will make your fundamental knowledge sound and complete.