DOM... What is it?

In the bygone eras of the web, before frameworks and libraries, there was a whisper... a murmur... a legend... DOM. For those brave souls who ventured into the uncharted territories of pure JavaScript, the DOM was both their weapon and their shield. But what exactly is this DOM you ask? Buckle up, young and brave developer, for we are about to embark on a journey to unveil its secrets!

DOM stands for Document Object Model. There are many ways to describe or define what exactly it is and I will list some of the common descriptions.

It is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
It's a programming interface for web documents. It represents the structure of HTML or XML documents as a tree-like model where each node represents a part of the document, such as elements, attributes, and text. All of these above descriptions are very much correct as long as it gives us one very important key point which is “accessing the document - be it HTML or XML.

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

Don’t fret, let me break it down.
Imagine a web page as a big tree. Each branch and leaf represents different parts like text, images, buttons, etc. The DOM (Document Object Model) is like a map of this tree. It helps programs (like JavaScript) understand and change what's on the page. So, if you want to move a leaf or add a new branch (like changing text or making a button do something when clicked), you can use the DOM to do it.
It's a programming interface for web documents. It represents the structure of HTML or XML documents as a tree-like model where each node represents a part of the document, such as elements, attributes, and text.

Below is a pictorial representation of what the DOM looks like.

In this tree:

The root element represents the entire HTML document, typically the <html> tag.
The branches represent elements within the document, such as <head>, <body>, headings (<h1>, <h2>), paragraphs (<p>), and more.
The leaves represent text content within the elements. Each element in the DOM tree has attributes that provide additional information, like the id or class of an element. These attributes are not typically shown in a basic DOM tree visualization but are important for styling and manipulating elements using JavaScript. The DOM tree structure reflects the hierarchical organization of an HTML document. By understanding the DOM, developers can manipulate and interact with the content and structure of a web page using languages like JavaScript.

The W3C DOM standard is separated into 3 different parts:

Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents What is the HTML DOM? The HTML DOM is a standard object model and programming interface for HTML. It defines:

So, for context, we will be using more HTML DOM.

The DOM Programming Interface
The HTML DOM can be accessed with JavaScript (and with other programming languages).
In the DOM, all HTML elements are defined as objects.

The programming interface is the properties and methods of each object.

A property is a value that you can get or set (like changing the content of an HTML element).
A method is an action you can do (like add or deleting an HTML element).

The following example changes the content (the innerHTML) of the

element with id="demo":

{ <html>
<body>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html> }

In the example above, getElementById is a method, while innerHTML is a property.

The getElementById method: the most common way to access an html element is to use the id of the element
The innerHTML property: the easiest way to get the content of an element is by using the innerHTMK property and it is used for getting and replacing the content of the html elements.

DOM SELECTORS
The selectors are used in the document (DOM) to manipulate web elements.

FEW EXAMPLES OF DOM SELECTORS

getElementsByTagName (""): as the name implies, it gets the element by its tag name. getElementByTagName("h1")
getElementsByClassName(""): gets the html documents by the class name given to a particular content.
getElementById(""): gets the Id class of an element.
Notice here that it is only in getElementById the word "Element" is singular because it has just one ID.
getElementById shows the full html content made for that id
in order to access the full content of the other dom selectors you do, getElementByClassName("you tag the classname")[o] - calling the zero index of the array

QUERY SELECTOR / QUERY SELECTOR ALL
document.querySelector ("the tag you want to select")
query selector selects only the first item that it finds. and on the other hand, document.querySelectorAll selects all the items on the tag
Get Attribute / Set Attribute
in document.getAttribute, you need to select the element first in order to be able to use the getAttribute method (that is, document.querySelector("").getAttribute("");)
brief example
document.querySelector("li").

So there you have it, intrepid developer! The mystery of the DOM is unveiled. We almost had to reveal the real secret behind the DOM but let's just keep that between us developers.
You've officially graduated from DOM newbie to DOM... well, maybe not quite a master, but at least you're no longer completely lost.
Now go forth and conquer those web pages, armed with the knowledge of this (not-so-magical) model. Shall we?

Blog

Utibeabasi Umoren

Join Our Newsletter. No Spam, Only the good stuff.

Related