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.
- The entire document is represented by a
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
- Which represent HTML tags such as
- 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 intotable
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.
Top comments (0)