Today I will show you how to get all Elements by Type using JavaScript through two methods that are: the document.querySelectorAll() method and the document.getElementsByTagName() method. Follow this article to know the usage and difference between the two methods above.
Get all Elements by Type using JavaScript.
Using the document.querySelectorAll() method
The document.querySelectorAll() method is a method of the Document Object that will return all the elements in the result set found by the CSS selector provided when calling the method as a NodeList object. If the selectors are invalid, the method will return a Syntax error.
To use this method to get all Elements by Type using JavaScript, we set the CSS selector to be the type of the element we want to find, the document.querySelectorAll() method will retrieve all the elements with the type entered.
For example:
Let’s get the value of the two inputs whose type is “text” below.
<!DOCTYPE html>
<html>
<body>
<div>
<label>Student Name</label>
<input type="text" value="Thomas" />
<label>Address</label>
<input type="text" value="USA" />
</div>
<div>
<label>Result:</label>
</div>
<script>
const element = document.querySelectorAll("input[type=text]");
document.write(element[0].value + " " + element[1].value);
</script>
</body>
</html>Output:
Result:
Thomas USASo we got the value of the two inputs with type=”text” above.
Using the document.getElementsByTagName() method
The document.getElementsByTagName() method in JavaScript is a method of Document Object that returns all elements of the specified tag name.
To get all Elements by Type using JavaScript with this method, we first use document.getElementsByTagName() to retrieve the elements (e.g: input, p, h1, … ). Second, we process the returned HTML Collection Object and filter out the element with the type we are looking for.
For example:
Let’s get the value of the two inputs whose type is “text” below.
<!DOCTYPE html>
<html>
<body>
<div>
<label>Student Name</label>
<input type="text" value="Thomas" />
<label>Address</label>
<input type="text" value="USA" />
</div>
<div>
<label>Result:</label>
</div>
<script>
const element = document.getElementsByTagName("input");
for (let i = 0; i < element.length; i++) {
if (element[i].type == "text") {
document.write(element[i].value + " ");
}
}
</script>
</body>
</html>Output:
Result:
Thomas USAThe primary difference between the two methods introduced above is the data type we get. While the getElementsByTagName() method returns an HTMLCollection Object, the SelectorAll() method returns a NodeList.
Summary
So we have learned how to get all Elements by Type using JavaScript in two ways through the above explanations and examples. Both methods give the desired result, and you can choose the one that works for you. If you want a NodeList as a result, use the document.querySelectorAll() method and use the document.getElementsByTagName() method to get an HTML Collection Object. I hope you enjoyed this article.
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
