The document.getElementsByName() method is a built-in method of the DOM API that allows you to select HTML elements by the value of its name attribute.
The method requires you to pass the name attribute that you want to search for on your current HTML page.
For example, suppose you have the following HTML page:
<body>
<p name="opening">Opening paragraph</p>
<p name="closing">Closing paragraph</p>
</body>
Here’s how you can select the <p> element with the name attribute value of "opening":
let elements = document.getElementsByName("opening");
console.log(elements); // [p]
console.log(elements[0]); // <p name="opening">Opening paragraph</p>
The getElementsByName() method returns an array-like object called HTMLCollection which stores all elements that matches the value passed as the method’s argument.
This means you can get multiple elements that have the same name attribute in your HTML page.
Take a look at the following HTML <body> tag content:
<body>
<p>Web technologies</p>
<ul>
<li name="list">HTML</li>
<li name="list">CSS</li>
<li name="list">JavaScript</li>
<li>PHP</li>
</ul>
</body>
When you use getElementsByName() method to retrieve the name=list elements above, the first three <li> tag will be retrieved by the method and returned as an HTMLCollection:
let elements = document.getElementsByName("list");
console.log(elements); // [li, li, li]
console.log(elements[0]); // <li name="list">HTML</li>
console.log(elements[1]); // <li name="list">CSS</li>
console.log(elements[2]); // <li name="list">JavaScript</li>
The elements will be ordered from the first element found at the top to the last one at the bottom.
Conversely, the method will return an empty array [] when there is no matching element found in the HTML page.
Keep in mind that even though you can access HTMLCollection object’s value like an array, the HTMLCollection object does not inherit methods from JavaScript Array prototype object.
This means JavaScript Array methods like forEach(), map(), or filter() can’t be called from an HTMLCollection object.
If you want to do something with all elements that match your selection, you need to use the document.querySelectorAll() method.
See Also: querySelectorAll() method explained
The querySelectorAll() method returns a NodeList object that implements the forEach() method.
