Get an Element by Name attribute using JavaScript

avatar

Borislav Hadzhiev

Mon Jan 03 20223 min read

banner

Photo by Larm Rmah

Table of Contents #

  1. Get an Element by Name attribute using JavaScript
  2. Get an Element by Partially matching its Name attribute

Get an Element by Name attribute using JavaScript #

Use the querySelector() method to get an element by a name attribute, e.g. document.querySelector('[name="first_name"]'). The method returns the first element in the DOM which matches the provided selector. If no element matches the selector, null is returned.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <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>

And here is the related Javascript code.

index.js
// โœ… 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]

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
const el1 = document.querySelector('[name="box1"]');

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

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
const elements1 = document.querySelectorAll('[name="box1"]'); console.log(elements1); // ๐Ÿ‘‰๏ธ [div]

The querySelectorAll method returns a NodeList containing the matches.

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

index.js
const elements2 = document.getElementsByName('box1'); console.log(elements2); // ๐Ÿ‘‰๏ธ [div]

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
const el1 = document.querySelector('div[name="box1"]'); console.log(el1); // ๐Ÿ‘‰๏ธ div

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

Get an Element by Partially matching its 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
// โœ… 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
Any of the examples above can be replaced with the querySelectorAll method to get a collection of elements matching the selector.

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

index.js
const el1 = document.querySelector('[name^="bo"]');
You might be familiar with the caret ^ symbol, which has the same meaning when used with regular expressions.

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

index.js
const el2 = document.querySelector('[name$="ox1"]');

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

index.js
const el3 = document.querySelector('[name*="box"]');
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
const el1 = document.querySelector('div[name^="bo"]');

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

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee