The Dom (Document Object Model)

What is the DOM? Is it the browser? Is it JavaScript? The Dom, which stands for: Document Object Model is a foundational piece of interactive javaScript. Before you can write EventListners and browser events you need to understand the DOM. That's what this first series of blogs will attempt to do. I will discuss what the DOM is, how to select a page element by ID, class, or tag. I will also dive into Nodes, elements and interfaces. How to update, add new, remove, and style existing page content. Working with browser events such as EventListners. We'll finish our DOM series by discussing performance. What is reflow and repaint? The call stack and the event loop? All these topics will be discussed, but first, let's find out what the DOM actually is.

This is a great short video on the DOM

When you request a website, the browser receives a stream of HTML. The HTML then goes through a parsing process that determines the different characters.

"the DOM is the full, parsed representation of the HTML"

For example the start tag character <, an attribute like href, a closing angle bracket like >. Once the parsing process has finished, a new process begins called tokenization. Tokenization takes one character at a time and builds up tokens.

The HTML DOM tree of objects
HTML DOM tree

At this point the browser has received HTML from a server. The browser then takes the HTML tags from the HTMl and through a process called tokenization converts them to tokens. This entire process is done by the tokenizer.

"The DOM is a tree-like structure that is a representation of the HTML document"

The tokens then goes through the tree construction stage. The output of this stage is a tree-like structure, this is the DOM.

A great intro into the DOM at Udemy.

So the DOM is a model (representation) of the relationships and attributes of the HTML document that was received. Also a javaScript object is a tree like structure that has properties and values. So the DOM can be accessed using a special object provided by the browser document

Try it out:

  1. Open Dev tools
  2. Open the console tab
  3. Type out the word document
  4. Press enter
Example of DOM hierarchy in an HTML document

Check out more about the DOM at Wikipedia

The history of the Document Object Model is intertwined with the history of the "browser wars" of the late 1990s.

The document object is provided by the browser and is a representation of the HTML document. However, this document is not provided by JavaScript. It is however; expected to already exist and be freely accessible to JavaScript code.

The DOM Recap

So to recap, The DOM stands for "Document Object Model" and is a tree-like structure that is a representation of the HTML document, the relationship between elements, and contains the content and properties of the elements.

"The DOM is not part of the JavaScript language"

It's important to remember that the DOM is constructed from the browser and is globally accessible by the JavaScript code using the document object. The DOM however is not part of the JavaScript language.

Next week we will go over selecting Page Elements by ID, Class and Tag.