| by Arround The Web | No comments

How to Get Element by Type in JavaScript

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.

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:

<h3>Get Element by Type = input[type=text]</h3>
<input type="text" id="Name" value="John"><br><br>

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

<input type="radio" id="html" value="HTML"> HTML <br>
<input type="radio" id="css" value="CSS"> CSS <br>
<input type="radio" id="js" value="JavaScript"> JavaScript <br>

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

<button onclick="elementGetbyType()">Click</button>

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:

var elementTypeSelector = document.querySelectorAll('input[type=text]');
function elementGetbyType(){
 alert("The HTML element input type text contains " + elementTypeSelector[0].value);

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:

var elementTypeSelector = document.querySelectorAll('input');

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

console.log(elementTypeSelector[0].value, elementTypeSelector[1].value, elementTypeSelector[2].value, elementTypeSelector[3].value);


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.

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


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

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:

var elementTypeSelector = document.getElementsByTagName('input');
function elementGetbyType(){
 for(let i = 0; i < elementTypeSelector.length; i++) {
  if(elementTypeSelector[i].type == 'radio') {
   alert("The HTML element input type radio contains " + elementTypeSelector[i].value);

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

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


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.

Share Button

Source: linuxhint.com

Leave a Reply