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:
- Get Child Element by Class using JavaScript
- Get Element by aria-label using JavaScript
- Get element by ID by partially matching String using JavaScript
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R