Document Object Model(DOM) Interaction
Check the updated DevOps Course.
Course Registration link:
Course Link:
YouTube link:
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 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 return 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 allow us to grab things based on css selectors and save lot of our time. So querySelectorAll returns all the objects whereas querySelector returns all object.
Now let see how its helpful for us
Take a simple example where I want to change the Header color
