Get child element by ID using JavaScript

Get Child Element by ID using JavaScript

This article helps you know how to get child element by ID using JavaScript by using getElementById() and querySelector(). This is one of the most important skills when you work with element selection in Javascript.

How to get child element by ID using JavaScript?

Using getElementById()

This function finds and returns a child element with a given id of the element that called the method.

Syntax:

getElementById(id)

Parameter:

  • id: The child element id to get.

You can get a child element by ID with this method, suppose the parent element is the document and you are looking for a child element by id “learnshareit”.

<html>
  <body>
    <p id="learnshareit">LEARNSHAREIT</p>
    <p id="learnshareit">LEARNSHAREIT1</p>
    <script>
      // Get child element by id
      let res = document.getElementById("learnshareit");
      console.log(res);
    </script>
  </body>
</html>

Output:

<p id="learnshareit">LEARNSHAREIT</p>

As you can see, the element we get is the first found element that matches the id you want. In fact, we do not recommend you declare elements on your page that have the same id because it is not logical and therefore will be difficult to maintain.

The method will return the first matched element with a given CSS selector.

Using querySelector()

Syntax:

querySelector(selector)

Parameter:

  • selector: A string that contains one or more CSS selectors to match against. 

A selector is somehow the same as a CSS selector when it comes to the id condition. If you want to find the id you will use the hash (#) character followed by the id. For instance:

<html>
  <body>
    <p id="learnshareit">LEARNSHAREIT</p>
    <p id="learnshareit">LEARNSHAREIT1</p>
    <script>
      // Get child element of the body by id
      let res = document.body.querySelector('[id="learnshareit"]');
      console.log(res);
    </script>
  </body>
</html>

Output: 

<p id="learnshareit">LEARNSHAREIT</p>

As you can see, this solution also produces the same result as the first one. However, it allows you to get a child element from another specific parent element such as body (instead of document like the first one). However, sometimes your id contains a special character or a preceding number, this method will raise an error if you use it. Instead of using a hash, you could use a box of entire attributes, for instance:

<html>
  <body>
    <p id="learnshareit">I am alone</p>
    <div id="parent">
      <p id="learnshareit">I have a parent</p>
    </div>
    <script>
      // Get child element of div element by id
      let parent = document.getElementById("parent");
      let child = parent.querySelector('[id="learnshareit"]');
      console.log(child);

      // Get child element of div element by id
      child = document.querySelector("#parent > #learnshareit");
      console.log(child);
    </script>
  </body>
</html>

Output: 

<p id="learnshareit">I have a parent</p>
<p id="learnshareit">I have a parent</p>

In the example above, we have shown you two ways to get the child element of the div element by id “learnshareit”. As can be seen, the first way requires you to find the parent node first while the second one only needs 1 css selector.

Summary

We have learned how to get child element by ID using JavaScript using two different approaches. With the help of our instructions in this tutorial and other ones, you can easily succeed in achieving the task. Good lucks!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *