Document Object Model(DOM) — Interaction Part 2

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>
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.

Show your support

Clapping shows how much you appreciated Prashant Lakhera’s story.