In this artcle we are going to get an understanding of Document Object Model known as DOM.
The words DOM are used by developers and can be found all over the internet. However you may not be quite sure of what is it exactly.Don't worry you're on the good place.
I. The DOM, and DOM construction
I.1 The DOM
The DOM (Document Object Model) is a programing interface for the web document , it represents the page as an object so that programing languages can access to and modify the document (web page) structure , style , etc.
I.2. DOM construction
As DOM is the object model of the HTML document, let's understand step by step how this object is contructed by the browser.
step 1
No mater which backend is used , when we request a web page , it responds as an HTML, on the first step HTML document is received.
step 2
HTML is composed by tags (starting and ending tags). For each tag the browser emits a token.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
...
</head>
</html>
From the code above, the browser will emit first the start tag html token, next the browser emit start tag head token , and so on. This process is done by the Tokenizer.
step 3
while the tokenizer is generating and emitting tokens , those ones are consumed and converted into nodes.
From step two, we may have after consuming start tag html token a html node , next head node, then meta node, then link node.
You may ask, how the browser knows that head tag is a child of html tag ?😕️.
Well, good question. As the starting tag head token was emitted before the endig tag of html token, its means the head tag is a child of html tag.
The image above shows how nodes are linked to each other .
Note: In the DOM each tag contains all its related attributes as well.
step 4
Now , we have all the nodes and their related attributes , the browser builds the Object representation of our HTML document.
All the step of DOM construction can be represented by the image below.
characters are the tag symbols
<,>.
II. DOM manipulation with Javascript
The DOM is not a part of javascript language as we can think , however it can be accessed and manipulated by javascript using the special object provided by the browser document.
II.1 Select unique Element
II.1.a Select Element by ID
Said previously, DOM is an object representation of HTML document, means it has key: value pair. Some of them are properties and others are methods that provid some fonctionalities.
The first DOM method that we will be loocking at is getElementById().
document.getElementById("myElementId");
The above method receives an argument which is the id of the element that you want to select or you want to have access to.
<!DOCTYPE html>
<html lang="en">
...
<body>
<h1 id="title">Home page title</h1>
<script src="./index.js"></script>
</body>
</html>
To get the h1 tag using its id we can use the following code.
const myHomePageTitle = document.getElementById("title");
The getElementById("myId") method returns an Element object representing the element whose id property matches the specified string passed as argument.
Readmore about this method here.
II.2. Select multiple Elements
II.2.1 Select Element by class
The second way to select a HTML elements, is by using the class attribute.
document.getElementsByClassName("myClassName");
Also this method , revceives a class of the elements we want to select and return an HTMLCollection.
The image above illustrates the type of value returned by the getElementsByClassName() method.
II.2.2 Select Element by tag
The second way of selecting multiple element is by using element's tag name. As the tag is not always unique , the following method returns an HTMLCollection as well.
document.getElementsByTagName("div");
This method needs the tag name that we want to select as argument, this may be div, p,span,etc.
II.2.3 querySelector() and querySelectorAll()
These are two more mays of selecting multiple elements, but f querySelector() and querySelectorAll() methods need an element selctor like in css in its argument.
document.querySelector("#id"); // to select element by Id
document.querySelectorAll(".class"); // to select elements by class
The .querySelector() method will always return the first element whose the id or class match the specified string passed as argument. While the .querySelectorAll() will return an NodeList of element that the specified selector matches with.
Note
HTMLCollectionandNodeListare not arrays as we can think at the first look. However they can be transformed into an array then be manipulated as arrays. The code bolow illustrate one of the ways to transform aHTMLCollectionorNodeList
const panels = document.querySelectorAll(".panel"); // return a NodeList
const panelsToArray = Array.from(panels) // return an array
Read more about DOM interfaces here
III. Modify Page Content
We are able to select an element , now , we are going to understand how to update the content on page using the DOM.
III.1. innerHTML property
innerHTML is an Element (Elemement Interface) property that allows to get or set HTML or XML content of an element.
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
const list = document.getElementById("list");
console.log(list.innerHTML) // return "<li>Item 1</li><li>Item 2</li><li>Item 3</li>" as a DOMString not a string
list.innerHTML += "<li>Item 4</li>"; // add a new *li* tag with **itme 4** as content
III.2 textContent and innerText properties
textContent and innerText can be confusing but there still difference.
-
textContent: gets the content of all elements, including<script>and<style>elements. In contrast,innerTextonly shows "human-readable" elements, meansinnerTextwill consider thecssstyle.
<ul id="list">
<li class="list__item">Item 1</li>
<li class="list__item list__item--hidden">Item 2</li>
<li class="list__item">Item 3</li>
</ul>
...
.list__item--hidden{
display: none;
}
...
const list = document.getElementById("list");
console.log(list.textContent);
// return Item 1 Item 2 Item 3
console.log(list.innerText);
// return item 1 item 3 because Item 2 is hidden by css style
IV. Conclusion
- DOM is not part of javascript language
- DOM is constructed from the browser
- DOM is globally accessible by JavaScript code using the
documentobject
In this article we learned what is DOM, and how to access and update content on the page using DOM. You can find the next part where we focus on how to add and remove content on the page here.
Top comments (2)
This was really helpful
Good article