JavaScript getElementsByName()

Syntax of JavaScript getElementsByName()

The syntax of getElementsByName in JavaScript is:

Parameters of JavaScript getElementsByName()

The DOM element, i.e., document.getElementsByName in JavaScript, takes only one parameter, which is the name of the document.

Return Value of JavaScript getElementsByName()

Return Value: collection of array

The function getElementsByName in JavaScript returns a node list (the collection of an array of elements) that is related to the document name.

Exceptions of JavaScript getElementsByName()

JavaScript getElementsByName() throws no error, but user may get an error due to a typo:

TypeError - We get an uncaught TypeError if we use getElementByName rather than using getElementsByName().

Example

Here's a simple example of getElementsByName().

In this example, the checkboxes whose name is set to birds are checked using getElementsByName().

Output

In the above result, the checkboxes having name birds are only checked to do that for loop is used where every element in the collection gets checked one by one if it matches the name as added as the parameter in getElementsByName().

Explanation

In the above example, we are trying to get the checkboxes automatically checked where the name of the input type is the bird. To do that, we will run JavaScript function getElementsByName.

How does JavaScript getElementsByName() work?

The name of the function is getElementsByName(); here specifically focus on the word Elements because sometimes we might use getElementByName, which will not work because it is not defined in JavaScript. Therefore, use the DOM getElementsByName() element.

The JavaScript DOM getElementsByName() method takes the parameter name of the document, i.e., the name given to the element, and returns the array of HTML elements or node list.

To understand the working of getElementsByName(), we will be looking at different examples.

More Examples

There are different ways of using getElementsByName() function.

Example 1

It can be used to count the number of list items.

Let us find the total number of continents and countries added in the list and also add some CSS to it.

Code

Output

When you click on the button Count country, you get the following pop-up.

Similarly, when we click on the button Count continent we get the following pop-up as shown.

Similarly, we get the results for the total number of countries and continents.

Explanation

As we can see in the above code results, the total number of list items is printed in the pop-up window because we added the alert button. For example, when we click on the button Count countries, the function countcount() gets called and we get the total number of list items added that are referred to the name "country".

Example 2

Next, we will use the getElementsByName() function to get the number of link elements where we will specify the name of the <a> tag.

Code

Output

When the button related to web dev is clicked we get the following output.

When the button related to programming is clicked, we get the following output.

Explanation

In the above example, we are not using the alert box to get the total number of link elements instead a name is given to the paragraph tag that will give the result we want. For example, to get the total number of web-dev-related links a function countWeb() is created that is called when we click on the button "Count Web Dev related links".

Supported Browser

Browsers that are supported by DOM getElementsByName() method are: -

• Chrome - Minimum version required is Chrome1.0.
• Safari - Minimum version required is Safari1.0.
• Opera - Minimum version required is Opera5.0.
• Firefox - Minimum version required is Firefox1.0.
• Microsoft Edge - It requires edge 79 and above.