Get Element(s) By Name In JavaScript

Learn how to get one or more HTML Elements by name attribute using getElementsByName() and querySelectorAll() methods in JavaScript.

• Get Element(s) By Name → you’re here
• Get Element By ID
• Get Element(s) By Class Name
• Get Element(s) By Tag Name

1. Get Element(s) By Name Using getElementsByName()

<button name="color">button 1</button>
<button name="color">button 2</button>
<button name="color">button 3</button>
<button name="size"> button 4</button>
<button name="color">button 5</button>

Get all the elements by name attribute color using getElementsByName() method.

const buttons = document.getElementsByName("color");
// console.log(buttons); // NodeList[4] LIVE

buttons.forEach(button => {
  button.style.background = "#32bacf"; 
})

Call the getElementsByName() on the document object.

It takes one argument which is the value of the name attribute specified in the HTML code.

In this case: color

Unlike other getElementsBy* methods, getElementsByName() method returns live NodeList.

NodeList can be iterated using in-built forEach() method.

Try it out

See the Pen Get Element(s) By Name #1 by SoftAuthor (@softauthor) on CodePen.

2. Get Element(s) By Name Using querySelectorAll()

Invoke the querySelectorAll() method on the document object.

It takes one argument but the name attribute does not have a native prefix symbol similar to id (#) or class (.) attributes.

For that reason, add the name and value of the name attribute inside square brackets separated by the equal sign in quotes.

In this case: [name=size]

const buttons = document.querySelectorAll("[name=size]");
// console.log(buttons); // NodeList[1] NOT LIVE

buttons.forEach(button => {
  button.style.background = "#32bacf"; 
})

It returns a static NodeList that has in-build forEach() method to iterate over its items.

Try it out

See the Pen Get Element(s) By Name #1 by SoftAuthor (@softauthor) on CodePen.

3. Get Element(s) By Multiple Names

To get elements by multiple names attributes in a single query, call the querySelectorAll() method on the document object passing name attributes as an argument separated by a comma in quotes.

This returns a static NodeList object that can also be iterated using forEach() method.

const buttons = document.querySelectorAll("[name=color], [name=size]");
console.log(buttons); // NodeList[5] NOT LIVE

buttons.forEach(button => {
  button.style.background = "#32bacf"; 
});

Try it out

See the Pen Get Element(s) By Name #3 by SoftAuthor (@softauthor) on CodePen.