Paul Thompson

Posted on May 16, 2022 • Edited on Sep 3, 2022

What is the DOM?

#webdev #beginners #dom #html

The DOM stands for Document Object Model, which is an interface that represents the contents of a HTML or XML document.

This interface is a collection of objects, actions, attributes and relationships, which is collectively is known as an Object Model.

The DOM provides developers with a language-independent application programming interface to access and manipulate the document.

Documents as a result can be as dynamic as web app or as static as a read-only page

For the rest of this article, I will be discussing the DOM in relation to HTML documents (web pages) which are accessed in web browsers, such as Chrome, Safari, Edge or Firefox.

How is the DOM created?

The browser first needs to process the document, in order to use it.

Before a web browser can display or use a HTML document, it needs to create the DOM. It does this by downloading and processing the document, creating the resulting object model in its memory.

Various processes need to take place, in order to create the DOM:

Bytes > Conversion > Tokenizing > Lexing > DOM construction

Bytes:- the browser reads the document in a stream of bytes, via packets sent across the internet or retrieved from local disk.
Conversion:- these bytes are then converted into characters based upon the encoding specified in the document (usually UTF-8).
Tokenizing:- the characters are then pattern matched into tokens as defined by the HTML specification, such as <body>,<div>
Lexing:- the tokens are then converted into "objects", which define their properties and rules.
DOM construction:- finally the relationships of these objects are built into a tree-like structure (a parse tree) as defined by the HTML document.
- The entire document is represented by a document node.
- The <html> element is the root element , which represents the top-most part of the HTML document.
- All other nodes are descendants of the root element, within the DOM.

For example: the head and body element nodes are descendants of the root html node.

More than one child node creates a sibling relationship.
e.g. li's are siblings within the ul tag.

Every time the browser processes HTML, this DOM creation process runs.

Browsers are tolerant of HTML errors

During the DOM creation phase, the browser will address various issues or errors it encounters with the source HTML. This error handling results in a resilient foundation for our web page/app content.

Features of the DOM

The document object model covers:

Interfaces and objects used to manipulate the document
The meaning of these interfaces and objects, including attributes and behaviour
The relationships and collaborations among the interfaces and objects

Logical structure

The DOM closely represents the document's structure via nodes and links, whereby:

HTML elements, attributes, text etc are represented by nodes (a basic unit in a data structure)
- (Each node contains objects)
Links or pointers are used between nodes, which represent the nodes hierarchical relationships to each other

Tree structure

The logical structure is generally thought of as a tree-like structure, so you may encounter terms such as 'document tree' and 'DOM tree' when describing the document's structure or hierarchy. This tree-like structure, is not a DOM specification or implementation requirement, however, it is a generally understood mental model to have for HTML documents.

Properties and methods

The object model provides properties and methods, which allow developers to find, access and interact with the document's contents

Properties are values of objects (typically HTML elements) which you can return or change, such as classList, innerHTML, innerText etc.
Methods are actions related to DOM objects, such as querySelector(), createElement(), addEventListener() etc

Properties and methods vary depending upon the node type in the DOM.

Representative types/objects

The object model can represent the HTML document in various ways. How a document part is represented, will determine how it can be interacted with (i.e. what properties and methods it has).

Node type

Every node in the DOM has a node type.
There are 12 node types in total but some node types have been deprecated. The integer (number) value represents the type of the node.

Notable node types include:

ELEMENT_NODE (1)
- Which represent HTML tags such as div,body,p
TEXT_NODE (3)
- The text/string value between HTML tags
COMMENT_NODE (8)
- The comment value in the HTML
DOCUMENT_NODE (9)
- This represents the entire document in the tree structure

Attribute values
Values such as id,class href are technically not part of the DOM tree.

since they are not actually child nodes of the element they describe, the DOM does not consider them part of the document tree.
...
The DOM takes the view that attributes are properties of elements rather than having a separate identity from the elements they are associated with

Source: Document Object Model (DOM) Level 3 Core Specification - Interface _Attr

Attribute objects inherit the node interface and have a node type: ATTRIBUTE_NODE (2)

Collections

Depending upon DOM selection method used and the node(s) selected, the returned value could be a collection of elements/nodes rather than a single element or node.

Nodelists

Nodelists are collections of nodes, which are array-like in nature. Nodelists may be looped over using forEach when interacting with the DOM.
Nodelists can contain text and attributes nodes.

HTMLCollection

HTMLCollections are collections of elements (tags) unlike Nodelists, which can contain all node types. Like NodeLists, HTMLcollections are array-like.

HTMLCollection is a historical interface returned by the older DOM selection methods
getElementsByTagName()
getElementsByClassName()

Collection values can be either live or static:

Live values update when the DOM updates
Static values are obtained only when DOM selection is executed, they are unaffected by future updates to the DOM

Note
Both NodeLists and HTMLcollections can be converted to JavaScript arrays, granting developers greater flexibility in data manipulation (with methods unavailable in these array-like data structures).

DOM interface / Web APIs

Although the DOM is cross-platform and language independent, it's typically manipulated with JavaScript in the browser.

When working with the DOM in JavaScript, expressions are imperatively structured.
This means we are telling the browser exactly what to do, such as: select a DOM node and perform an action on that selection.

This can be done directly on the DOM selection:
e.g.

document.getElementById("heading").style.color = "blue";

or by using JavaScript variables to more effectively structure the code.

const pageTitle = document.getElementById("heading");
pageTitle.style.color = "blue";
pageTitle.style.textTransform  = "Uppercase";

The DOM API provides various properties and methods to manipulate the document, which can be grouped by type/function, such as:

Selection
Traversal (navigating between nodes)
Creating or updating content
Deleting or removing content
Styling content
Node/collection methods
Events

Declarative DOM manipulation

For many developers, direct DOM manipulation is too verbose (e.g. overly long method names) and too expensive for modern web app implementations.

Developers found their implementations would grow complexity (numerous DOM event listeners) with performance downsides of frequent DOM updates.

Developers as a result, will now often use a JavaScript framework or library instead, which takes care of this complexity for them. These tools provide the developer with a declarative interface, where they can tell the browser/program logic "what to do" instead of "how to do it".

Examples include: React, Vue, Svelte etc

In these cases, the framework/library does the DOM manipulation for the developer, usually with an intermediary step (such as a Virtual DOM or compilation).

What ISN'T the DOM?

When working with the DOM, it's worth knowing what isn't the DOM, particularly when using browser dev tools.

The DOM is not your HTML markup

The DOM is not your source .html file,
it is not viewable when you View page source.

Although the DOM is a representation of the document, it is not an exact duplication in the browser. The browser will fix various issues with the underlying mark up (HTML).

Such as:

Inserting omitted tbody tags into table structures
closing unclosed tags
moving tags incorrectly nested in other elements

The DOM is not static

Since the DOM is not your markup, it can be continually amended and updated with JavaScript, once the JavaScript has been loaded and run in the browser (the client) .

DOM manipulation can happen as part of the script's program design, it may also happen as part of scripted responses to user input or events, which can occur at any time.

Client-side JavaScript can be executed from various sources:

Within the HTML document (via <script> tags)
Linked externally via markup.
Dynamically loaded with JavaScript
Browser extension

Note: browser extensions often dynamically append elements to the DOM. Bare this in mind, when troubleshooting web pages/applications.

The DOM is not CSS content

When inspecting elements in browser devtools, you may also see CSS pseudo-elements (::before, ::after) near DOM elements. CSS pseudo-elements aren't part of the DOM, you can't manipulate them using DOM APIs and JavaScript.

The DOM is not JavaScript

Although you may write DOM APIs in JavaScript, DOM APIs aren't JavaScript nor are its objects the same as JavaScript objects.

querySelector != JavaScript

The DOM is after all, an interface for JavaScript to interact with the source document.

Related models/concepts

BOM

BOM stands for Browser Object Model and is a related object model used for interacting with documents inside web browsers.

The BOM is an unofficial standard but generally consists of the following objects:
Navigator
Window
Location
History
Frame

The document object is child object of the window object, which is a global object for the browser.

The BOM like the DOM, has it's own properties and methods. For example, the DOMContentLoaded window event, fires when the initial HTML has been loaded and parsed, regardless of stylesheet, image and subframe loading state.

CSSOM and Render Tree

Beside the DOM, the browser also creates an accompanying CSS Object Model, (the CSSOM) taking into account all the styles applied to the document, from various sources (external, embedded, inline, user-agent, etc).

The browser then combines the DOM and CSSOM in a render tree, using only the nodes needed to render the web page.

The browser will use the render tree to paint/render the document to the device's screen.

The DOM and CSSOM, are independent models and form the critical rendering path.

Accessibility tree

Browsers will create the accessibility tree based upon the DOM. This tree exposes the accessible objects for HTML elements to assistive technologies and its users.

For accessible web pages, it is important to author HTML in a semantic/meaningful way, wherever possible adhering to web standards.

DEV Community