DOM: The document object model

- Now that you know what objects are, let me tell you something that will expand your perception of objects significantly. The browser is an object, and the document it displays is an object too. The browser itself has a long list of objects including: the browser window, the document inside the window, the navigation buttons, the location or URL, and more. These objects are modelled by what's known as the Browser Object Model, or BOM for short.

Because all these things are just objects, we can interact with them using JavaScript the same way we interact with any other object. If you want to know the width of the current viewport, you can simply ask for the window object, and its inner width property: window.innerWidth. If you want to open a new tab you use the window open method. Window is the top-level object in the BOM, and it has a ton of properties and methods you can use to interact with the browser itself, and what it displays.

You can see a list all the properties and methods for window in the documentation page on Mozilla Developer Network. You'll interact with some of the BOM objects from time to time, but the majority of them are mainly left to themselves since they are standard browser features and behavior. The exception is document, one of the properties in the window object, which contains the current HTML document. To get the document object you can call window.document.

But, since JavaScript typically lives inside the window, so inside the window object, you can get the document by simply calling it directly: document. Document, in turn has its own object model, the Document Object Model, or DOM for short. If you've worked with HTML and CSS before, you're already intimately familiar with the DOM, even if you didn't know it existed. The Document Object Model is the model of the document that forms the current webpage.

In HTML, every piece of content is wrapped in a beginning and end tag creating an HTML element. Each of these elements is a DOM node, and the browser handles each of them the same way it would handle an object. That's why when you target something with a CSS rule, say all anchor tags within the document, that rule is implemented to each of them individually. When you write a CSS rule targeting a, you're saying: "find me every a node, and apply the following style property settings to it".

When a document is loaded in the browser, it is loaded into the document object in the BOM, and a Document Object Model is created for just this document instance. The browser now creates a node tree, modelling the relationships between the different nodes. In a standard HTML document you'll have an HTML object containing two nodes: head, and body. Head holds all the invisible objects like title, link, meta, script, etc., while body holds all the visible nodes in the viewport.

These nodes in turn live in strict hierarchical relationships depending on how they are nested in the HTML. So, for example, a link in my menu is an a node, inside an li node, nested inside a ul node, nested inside a nav node, nested inside a header, nested inside the body node, nested inside the HTML node, nested inside the document object, nested inside the window object. You get the idea. You can see the code version of the DOM if you go to the Elements tab in Developer Tools in your browser.

Here you can select any node within the DOM, and see what styles are applied to that node.