100 Days of DevOps — Day 96-Document Object Model(DOM)
To view the updated DevOps course(101DaysofDevOps)
Course Registration link: https://www.101daysofdevops.com/register/
Course Link: https://www.101daysofdevops.com/courses/101-days-of-devops/
YouTube link: https://www.youtube.com/user/laprashant/videos
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
This will return the HTML text of the page
To see actual objects
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>
As you see it document.url returns the actual URL of the website
Now let see document.body
Returns everything on the head page
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
NOTE: It’s spelled as Elements(extra s)
# 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
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>
What textContent will do is just return the textContent
So now we need to change the style of content we need to use innerHTML which will return the actual html
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.
- Twitter: @100daysofdevops OR @lakhera2015
- Facebook: https://www.facebook.com/groups/795382630808645/
- Medium: https://medium.com/@devopslearning
- Slack: https://devops-myworld.slack.com/messages/CF41EFG49/
- GitHub Link:https://github.com/100daysofdevops
Reference
