Document Object Model(DOM) — Interaction Part 2
Check the updated DevOps Course.
Published in
2 min readMar 12, 2017
Course Registration link:
Course Link:
YouTube link:
Let’s Dig further how to interact with the HTML from the DOM and change text,HTML code and attributes
https://github.com/lakhera2016/html/blob/master/dominteraction2.html
<!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.
