Get Element(s) by their Name attribute using JavaScript

# Table of Contents

# Get Elements by their Name attribute using JavaScript

Use the querySelector() method to get an element by a name attribute.

The method returns the first element in the DOM that matches the provided selector. If no element matches the selector, null is returned.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div name="box1">Box 1</div>
    <div name="box2">Box 2</div>
    <div name="box3">Box 3</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related Javascript code.

index.js

Copied!
// ✅ Get first element with name = `box1`
const el1 = document.querySelector('[name="box1"]');
console.log(el1); // 👉️ div

// ----------------------------------------

// ✅ Get all elements with name = `box1`
const elements1 = document.querySelectorAll('[name="box1"]');
console.log(elements1); // 👉️ [div]

// ----------------------------------------

// ✅ Get all elements with name = `box1`
const elements2 = document.getElementsByName('box1');
console.log(elements2); // 👉️ [div]

get element by name attribute

The code for this article is available on GitHub

# Get the first element that has a `name` attribute with a specific value

The first example uses the document.querySelector() method to get the first element that has a name attribute with the value of box1.

index.js

Copied!
// ✅ Get first element with name = `box1`
const el1 = document.querySelector('[name="box1"]');
console.log(el1); // 👉️ div

get first element that has name attribute with specific value

If no element in the DOM matches the selector, the method returns null.

# Get all elements that have a `name` attribute with a specific value

In the second example, we used the document.querySelectorAll() method with the exact same selector to get all of the elements that have a name attribute with the value of box1.

index.js

Copied!
const elements1 = document.querySelectorAll('[name="box1"]');
console.log(elements1); // 👉️ [div]

get all elements that have name attribute with specific value

The code for this article is available on GitHub

The querySelectorAll method returns a NodeList containing the matches.

# Get elements by name attribute using document.getElementsByName

An alternative approach is to use the document.getElementsByName() method, which also returns a collection of the elements with the provided attribute.

index.js

Copied!
const elements2 = document.getElementsByName('box1');
console.log(elements2); // 👉️ [div]

# Get elements of specific type by name attribute

You can also narrow things down by looking for a specific type of element, e.g. a div that has a name attribute set to a certain value.

index.js

Copied!
const el1 = document.querySelector('div[name="box1"]');
console.log(el1); // 👉️ div

The example would only match a div element that has a name attribute set to box1.

# Get Element(s) by Partially matching their Name attribute

To get an element by partially matching its name attribute, use the querySelector method with a selector that matches a name attribute whose value starts with, ends with or contains a specific string.

index.js

Copied!
// ✅ get element where name starts with `bo`
const el1 = document.querySelector('[name^="bo"]');
console.log(el1); // 👉️ div

// ------------------------------------------------

// ✅ get element where name ends with `ox1`
const el2 = document.querySelector('[name$="ox1"]');
console.log(el2); // 👉️ div

// ------------------------------------------------

// ✅ get element where name contains `box`
const el3 = document.querySelector('[name*="box"]');
console.log(el3); // 👉️ div

The code for this article is available on GitHub

Any of the examples above can be replaced with the querySelectorAll method to get a collection of elements that match the selector.

# Get elements with `name` attribute starting with

The first example gets the first DOM element that has a name attribute, whose value starts with bo.

index.js

Copied!
// 👇️ get first element
const el1 = document.querySelector('[name^="bo"]');

// 👇️ get all elements
const elements1 = document.querySelectorAll('[name^="bo"]');

You might be familiar with the caret ^ symbol, which has the same meaning when used in regular expressions.

# Get elements with `name` attribute ending with

The second example selects the first DOM element that has a name attribute that ends with ox1.

index.js

Copied!
// 👇️ get first element
const el2 = document.querySelector('[name$="ox1"]');

// 👇️ get all elements
const elements2 = document.querySelectorAll('[name$="ox1"]');

# Get elements with `name` attribute containing

The third example selects the first DOM element that has a name attribute that contains box.

index.js

Copied!
// 👇️ get first element
const el3 = document.querySelector('[name*="box"]');

// 👇️ get all elements
const elements3 = document.querySelectorAll('[name*="box"]');

The code for this article is available on GitHub

The string box could be located anywhere in the value of the name attribute for the condition to be met.

Note that you could also prefix the selector with a specific type of element you want to match to narrow down the results.

index.js

Copied!
const el1 = document.querySelector('div[name^="bo"]');

The example selects a div element that has a name attribute that starts with bo.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Get Element(s) by their Name attribute using JavaScript

# Table of Contents