100 Days of DevOps — Day 96-Document Object Model(DOM)

Prashant Lakhera
May 18 · 5 min read

Welcome to Day 96 of 100 Days of DevOps, Focus for today is Introduction to Document Object Model(DOM)

Document Object Model(DOM)

DOM act as an interface between JavaScript and HTML/CSS code on a webpage

Most Modern Web browsers will construct the DOM which basically means storing all the HTML tags as Javascript objects

To check the DOM of any website

Go to console(In Chrome Browser → Right Click on WebPage → Inspect → Console)and type document

document

This will return the HTML text of the page

To see actual objects

console.dir(documents)

console.dir(documents)

As you can see DOM is enormous.

How to grab HTML elements from the DOM

HTML elements are properties of the DOM

Now let see some important document attributes

document.URL: Returns actual URL of the website

document.body: Returns everything inside body

document.head: Returns everything in the head of page

document.links: Return all the links on the page

Let see some methods for grabbing elements from the DOM

document.getElementById()

Returns elements based on whatever Id we passed

document.getElementByClassName()

Returns elements based on whatever classname we passed, and then it return lists of all the items belonging to that class name

document.getElementByTagName()

Return lists of all the items belonging to that tag name

document.querySelector()

Returns the first element matches the css style selector

document.querySelectorAll()

Returns all the elements matches the css style selector

Now taking this code as an example let try to grab HTML elements

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM Interaction</title>
</head>
<body>
<h1>Document Object Model(DOM) Interaction</h1>
<p>How to grab HTML elements from the DOM</p>
<p>HTML elements are properties of the DOM</p>
<h5>Now let see some important document attributes</h5>
<ul class="mytest">
<li id="test">document.URL: Returns actual URL of the website</li>
<li>document.body: Returns everything inside body</li>
<li>document.head: Returns everything in the head of page</li>
<li>document.links: Return all the links on the page</li>
</ul>
<h5>Let see some methods for grabbing elements from the DOM</h5>
<ul class="mytest">
<li>document.getElementById()
Returns elements based on whatever Id we passed</li>
<li>document.getElementByClassName()
Returns elements based on whatever classname we passed, and then it return lists of all the items belonging to that class name</li>
<li>document.getElementByTagName()
Return lists of all the items belonging to that tag name</li>
<li>document.querySelector()
Returns the first element matches the css style selector</li>
<li>document.querySelectorAll()
Returns all the elements matches the css style selector</li>
</ul>
</body>
</html>
document.URL

As you see it document.url returns the actual URL of the website

Now let see document.body

document.body
document.head

Returns everything on the head page

document.links

In case if there are links in our page

These are all attributes, not methods so we don’t need to put parentheses in front of it

Now looks at important/useful methods

document.getElementById
document.getElementsByClassName

NOTE: It’s spelled as Elements(extra s)

document.getElememtsByTagName
document.querySelector/querySelectorAll

# for id

. for class

As mentioned earlier query selector allows us to grab things based on CSS selectors and save a lot of our time. So querySelectorAll returns all the objects whereas querySelector returns all object.

Now let see how it's helpful for us

Take a simple example where I want to change the Header color

Change Header Color

Let’s Dig further how to interact with the HTML from the DOM and change text, HTML code and attributes

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM Interaction</title>
</head>
<body>
<h1>Document Object Model(DOM) Interaction</h1>
<p>How to grab HTML elements from the DOM</p>
<p>HTML elements are properties of the DOM</p>
<h5>Now let see some important document attributes</h5>
<ul>
<li>document.URL: Returns actual URL of the website</li>
<li>document.body: Returns everything inside body</li>
<li>document.head: Returns everything in the head of page</li>
<li>document.links: Return all the links on the page</li>
</ul>
<h5>Let see some methods for grabbing elements from the DOM</h5>
<ul class="test">
<li>document.getElementById()
Returns elements based on whatever Id we passed</li>
<li>document.getElementByClassName()
Returns elements based on whatever classname we passed, and then it return lists of all the items belonging to that class name</li>
<li>document.getElementByTagName()
Return lists of all the items belonging to that tag name</li>
<li>document.querySelector()
Returns the first element matches the css style selector</li>
<li>document.querySelectorAll()
Returns all the elements matches the css style selector</li>
<a href="http://www.google.com">google</a>
</ul>
</body>
</html>
textContent

What textContent will do is just return the textContent

innerHTML

So now we need to change the style of content we need to use innerHTML which will return the actual html

getAttribute/setAttribute

getAttribute: Returns the original attributes

setAttribute: Allowed us to set attribute

So in the above example out of the class .test, first I want to grab URL(which is a part of anchor tag) and then I can update it using setAttribute.

Looking forward from you guys to join this journey and spend a minimum an hour every day for the next 100 days on DevOps work and post your progress using any of the below medium.

Reference