How To Find HTML Elements Using JavaScript

Mishal Abdullah | Nov 4, 2022 min read

thumbnail 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 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 ![[Pasted image 20221229153711.png]]

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,

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.