In this article, you will learn how to get DOM Element by Attribute using JavaScript in two ways: the getElementById() method and the querySelectorAll() method. Read the following explanations and examples to understand the two methods above.
Get DOM Element by Attribute using JavaScript.
Using the getElementById() method
getElementById()
in JavaScript is a method of DOM object used to get a DOM element through the value of the element’s id
attribute. This method will return the Element Object if an element with a matching id
is found and will return “null” if no matching element is found.
Example:
Let’s take out the paragraph containing the student’s name with id="stdName"
and print out its content.
<html> <body> <p id="stdName">Andrew</p> <p id="stdAddress">USA</p> <p>Result:</p> <script> //Get DOM element by ID attribute var element = document.getElementById("stdName"); // Print out the element's content document.write("Name of student: " + element.innerHTML); </script> </body> </html>
Output:
Andrew
USA
Result:
Name of student: Andrew
The getElementById()
method is the easiest way to get DOM Element by Attribute using JavaScript. However, this method only returns a single value because we cannot give the same id name to multiple elements.
Using the querySelectorAll()method
querySelectorAll()
or document.querySelectorAll()
in JavaScript is a method of the DOM object. This method gets all the elements in the DOM according to the specified CSS selectors. We can get elements according to various conditions by specifying CSS selectors as an argument in querySelectorAll()
.
The querySelectorAll()
method will return a NodeList Object containing all found elements. This method return an empty NodeList Object if no matching element is found.
Example:
Let’s take out the paragraph containing the student’s information with class="stdName"
and print out its content.
<html> <body> <p id="stdName" class="student">Andrew</p> <p id="stdAddress" class="student">USA</p> <p>Result:</p> <script> document.write("<p> Student's information </p>"); // Get DOM element by Class attribute const element = document.querySelectorAll("p[class=student]"); // Print out the element's content for (var i = 0; i < element.length; i++) { document.write(element[i].innerHTML + " "); } </script> </body> </html>
Output:
Andrew
USA
Result:
Student's information
Andrew USA
This way, we can get DOM Element by Attribute using JavaScript and get back all returned values. Elements in the returned NodeList Object will be distinguished by their index value. This value starts at 0 and increments by 1 unit (0, 1, 2, 3, 4…).
Summary
Through this article, I have introduced to you two ways to get DOM Element by Attribute using JavaScript. I recommend you utilize the querySelectorAll()
method to get all the returned DOM elements. Hope this article will help your project.
Hi, I’m Mary Ralston. I have experience programming in HTML, javascript, C++,… and I want to share with you my experience. So if you want to know more about the above languages read my articles