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

Document Object Model(DOM)

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

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

document

console.dir(documents)

console.dir(documents)

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
document.body
document.head
document.links
document.getElementById
document.getElementsByClassName
document.getElememtsByTagName
document.querySelector/querySelectorAll
Change Header Color
<!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
innerHTML
getAttribute/setAttribute

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Prashant Lakhera

Prashant Lakhera

4.91K Followers

AWS Community Builder, Ex-Redhat, Author, Blogger, YouTuber, RHCA, RHCDS, RHCE, Docker Certified,4XAWS, CCNA, MCP, Certified Jenkins, Terraform Certified, 1XGCP