DOM Elements

Finding HTML Elements

by Kumaresan S

HTML

<!--Get Element By Id-->
<p id="getByID"> Result For Get Element By Id</p>
<!--Get Element By Id End -->

<!--Get Element By Tag Name -->
<p> Result For Get Element By Tag Name</p>
<!--Get Element By Tag Name -->

<!--Get Elements By  Name -->
<p name="testName"> Result For Get Element By  Name</p>
<!--Get Elements By  Name -->

<!--Get Elements By  Class Name -->
<p class="testClass"> Result For Get Element By  Name</p>
<!--Get Elements By Class  Name -->

<!--Get Elements By  QuerySelector -->
<p class="testQuery"> Result For Get Element By QuerySelector </p>
<!--Get Elements By QuerySelector-->

<!--Get Elements By  QuerySelectorAll -->
<p class="testQuery"> Result For Get Element By  QuerySelectorAll</p>
<!--Get Elements By  QuerySelectorAll -->

JavaScript

// Get Element By Id
var elementID = document.getElementById("getByID");
elementID.style.color = "red";
// Get Element By Id End

//Get Element By Tag Name
var elementTagName = document.getElementsByTagName("p")[1];
elementTagName.style.color = "blue";
//Get Element By Tag Name

//Get Element By  Name
var elementName = document.getElementsByName("testName")[0];
elementName.style.color = "#685757";
//Get Element By  Name

//Get Element By Class Name
var elementClassName = document.getElementsByClassName("testClass")[0];
elementClassName.style.color = "#6e3636";
//Get Element By Class Name