DOM in Javascript - how to get/set all ID, CLASS and TAGS (full information with working code)
DOM in Javascript - how to get ID, CLASS and TAGS (full information with working code)
/*This is the simple HTML and Javascript Code we will use */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Page</title>
</head>
<body>
<div class="wrapper">
<div id="header">
<h1 class="header-tag" style="text-align:center; color:red;">THIS IS A SAMPLE SITE</h1>
<div id="main">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis molestias enim adipisci nisi, aut official.HELLO</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, corporis. HI</li>
<li>Lorem ipsum.GOODBYE</li>
</ul>
</div>
<div id="sidebar">
<ul <div id="hello">hey</div>
<li>Lorem ipsum dolor sit amet.HEY YA</li>
<li>Lorem ipsum dolor.HURREY</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
</ul>
</div>
<div id="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat unde ratione nemo, aliquam reiciendis repellat eius sunt, ullam inventore cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, quia!</p>
</div>
</div>
</div>
<script type="text/javascript">
// var a = document.getElementsByClassName("header-tag")[0].getAttribute("style");
var a = document.getElementsByClassName("wrapper");
var a = document.getElementsByClassName("wrapper")[0];
var a = document.getElementsByClassName("wrapper")[0].innerHTML;
console.log(a);
</script>
</body>
</html>
The output of the code looks like this :
NOW, We will try to access all kind of classes , ID and Tags present in the code though console.
To open console press : CTRL + SHIFT + I or just right click => Inspect => console.
1. To Access our First class wrapper, we need to first make an object of DOM and access with the command Document.getElementsByClassName("wrapper")[0]; we will get the following output:
Now we have already got access to our class wrapper, We can now access the HTML of this particular class by writing Document.getElementsByClassName("wrapper")[0].innerHTML This will give us the following output :
Similarly we can also use : Document.getElementsByClassName("wrapper")[0].innerText to get the inner Text for this particular class or Document.getElementsByClassName("wrapper")[0].Attributes to get the attributes for this particular class.
Now, we shall try to access the ID by writing : var a = document.getElementById("header");
we get the following output :
To get the full HTML code inside this ID "header" we will write : var a = document.getElementById("header").innerHTML;
var a = document.getElementById("header").innerText; can be written to get the text inside this ID in a similar manner to get the following output :
to Get the attributes, we will write :
var a = document.getElementsByClassName("header-tag")[0].getAttribute("style");
so we get the following output :
Third way to access the elements will be using Tag Name. So in order to access the H1 Tag using Tag Name we have to write the following code line:
var a = document.getElementsByTagName("h1");
we will get the following output :
var a = document.getElementsByTagName("h1").innerText;
var a = document.getElementsByTagName("h1").innerHTML;
var a = document.getElementsByTagName("h1").getAttributes;
These will also be valid to get the inner Nodes of these elements.Output will be something like this:
So we have learnt the most commonly used ways of accessing the HTML Tags, ID and Classes in a pretty simple way. So here is the working code for the above 3 ways :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Page</title>
</head>
<body>
<div class="wrapper">
<div id="header">
<h1 class="header-tag" style="text-align:center; color:red;">THIS IS A SAMPLE SITE</h1>
<div id="main">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis molestias enim adipisci nisi, aut official.HELLO</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, corporis. HI</li>
<li>Lorem ipsum.GOODBYE</li>
</ul>
</div>
<div id="sidebar">
<ul <div id="hello">hey</div>
<li>Lorem ipsum dolor sit amet.HEY YA</li>
<li>Lorem ipsum dolor.HURREY</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur.</li>
</ul>
</div>
<div id="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat unde ratione nemo, aliquam reiciendis repellat eius sunt, ullam inventore cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, quia!</p>
</div>
</div>
</div>
/* TO ACCESS THE ELEMENTS OF THIS CODE BY CLASS NAME WE WILL USE THE FOLLOWING CODES*/
<script type="text/javascript">
// var a = document.getElementsByClassName("header-tag")[0].getAttribute("style");
// var a = document.getElementsByClassName("wrapper")[0].getAttribute;
// var a = document.getElementsByClassName("wrapper")[0].innerText;
// var a = document.getElementsByClassName("wrapper")[0].innerHTML;
/* TO ACCESS THE ELEMENTS OF THIS CODE BY ID WE WILL USE THE FOLLOWING CODES*/
// var a = document.getElementById("header");
// var a = document.getElementById("header").innerHTML;
// var a = document.getElementById("header").innerText;
// var a = document.getElementsByClassName("header-tag")[0].getAttribute("style");
/* TO ACCESS THE ELEMENTS OF THIS CODE BY TAG NAME WE WILL USE THE FOLLOWING CODES*/
// var a = document.getElementsByTagName("h1");
// var a = document.getElementsByTagName("h1")[0].innerText;
// var a = document.getElementsByTagName("h1")[0].innerHTML;
var a = document.getElementsByTagName("h1")[0].getAttribute("style");
console.log(a);
</script>
</body>
</html>
/* :) Hope you have learnt something out of this blog */
Comments
Post a Comment
I WOULD APPRECIATE IF YOU LEAVE A COMMENT OR YOUR FEEDBACK HERE !!!