There are several ways to get or fetch an element in JavaScript, including getElementById() and getElementByClass(). However, have you ever thought about getting the type of element? If so, then let us tell you that JavaScript offers the querySelectorAll() or getElementsByTagName() methods that can be utilized for the specified purpose.

This write-up will explain the methods for getting elements by type in JavaScript.

How to Get Element by Type in JavaScript?

For getting elements by type, use the following methods:

• querySelectorAll() method
• getElementsByTagName() method

Let’s check out each of the mentioned methods one by one!

Method 1: Get Element by Type Using querySelectorAll() Method

“querySelectorAll()” is a JavaScript predefined document method that returns the element objects that match with the specified selectors. The querySelectorAll() and querySelector() methods work the same, but the main difference is that the querySelectorAll() gets all the elements matched with the selector while the querySelector() method returns only first matching element object.

Syntax
Follow the given syntax for the getting element by type using the querySelectorAll() method:

Here, the “selector” is the type whose elements you want to get for example “input” or “input[type=text]”. It will find out all the elements matched with the specified selector and return to the DOM. You can pass multiple selectors separated by commas.

Example 1: Get one Element by Type
In the following example, we will create an input field “text” with id “Name” and value “John” and a heading:

Also, create three input type “radio” by assigning ids and values:

Then, create a button by attaching “onclick” event that will trigger the user-defined method named “elementGetbyType()”:

In a JavaScript file, first, call the “querySelectorAll()” method by passing a selector “input[type=text]” that will return all the elements of this type. Then, define an “elementGetbyType()” method where an alert() method prints the message with the value of the specified selector:

The output displays “John” in alert message which is the value of the input type text field:

Example 2: Get all Elements by Type
Now, get all the elements of the input type by passing “input” as an argument in the “querySelectorAll()” method:

Print the values of the “input” selector including “text” and “radio” on console:

Output

Method 2: Get Element by Type Using getElementsByTagName() Method

There is another JavaScript predefined method called “getElementsByTagName()” that returns the element objects whose tag name matches the specified name.

Syntax
Use the following syntax to use the getElementByTagName() method:

Here, “name” is the tagName of an HTML attribute.

Example
In this example, we will get the value of the element by type using the “getElementsByTagName()” method, where we will pass the tag name “input” to get the values of the element to match with the specified tag name and store it in a variable “elementTypeSelector”. Then, define an “elementGetbyType()” function, in which the for loop will iterate until the length of the selector and check the type of the selector; if it is equal to “radio”, then call the alert() method to print the values of the radio element:

The output shows all the values of the input type radio:

We have provided all the solutions for getting elements by type in JavaScript.

Conclusion

To get the elements by type, use the JavaScript predefined methods including, querySelectorAll() method or the getElementsByTagName() method. The only difference between both of them is that the GetElementsByTagName() only fetched items whose defined tag name matches with the provided tag while querySelectorAll, which selects all elements. In this write-up, we have explained the different approaches for getting elements by type in JavaScript.