There are three ways of finding HTML elements
- document.getElementById()
- document.getElementsByTagName()
- document.getElementsByClassName()
Element By ID:-
The document.getElementById() method is the most common way to find HTML elements. You can assign a Tag any id you want and pass the id as a parameter to the document.getElementByid().
Example:-
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1 id="intro"> Hello World</h1>
</body>
<script>
var value = document.getElementById("intro");
value.style.color = "red";
</script>
</html>Output
Element By Tag Name
The second way is to find elements by the tag name.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1 id="intro"> Hello World</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas at neque aliquid earum repudiandae, repellendus, consequatur atque itaque repellat veniam perferendis veritatis exercitationem
nam tempora ab vitae maxime facilis. Nobis.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis unde possimus libero velit quas dolorum modi, impedit non atque debitis aut maxime doloribus laborum
reiciendis alias quis sunt numquam commodi.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur itaque harum incidunt quibusdam aliquid, consectetur doloribus. Libero necessitatibus ratione nemo repudiandae
aliquam dolore ipsam fuga reprehenderit magnam! Repellendus, accusamus minima.</p>
</body>
<script>
var value = document.getElementById("intro");
value.style.color = "red";
var para = document.getElementsByTagName("p");
console.log(para)
</script>
</html>Here, the function gets elements by their tag, and the return type is an array.
Output
Element By Class
Similar to the document.getElementsByTagName() method, the document.getElementsByClassName() method is also used to find
multiple elements. It uses class name to find elements. The return type is an array.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1 id="intro"> Hello World</h1>
<p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas at neque aliquid earum repudiandae, repellendus, consequatur atque itaque repellat veniam perferendis veritatis exercitationem
nam tempora ab vitae maxime facilis. Nobis.</p>
<p class = "text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis unde possimus libero velit quas dolorum modi, impedit non atque debitis aut maxime doloribus laborum
reiciendis alias quis sunt numquam commodi.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur itaque harum incidunt quibusdam aliquid, consectetur doloribus. Libero
necessitatibus ratione nemo repudiandae aliquam dolore ipsam fuga reprehenderit magnam! Repellendus, accusamus minima.</p>
</body>
<script>
var value = document.getElementById("intro");
value.style.color = "red";
var para = document.getElementsByTagName("p");
var classname = document.getElementsByClassName("text");
console.log(classname)
console.log(para)
</script>
</html>output
Link To The First Part Of The Series :-
Link To The Second Part Of The Series :-
If you like this blog , please don’t forget to give a clap . if you want to learn more about privacy,security,technology and Linux, consider following me. Plus, whatever I find interesting and valuable.
