JavaScript getElementsByName
last modified April 2, 2025
In this article, we explore the document.getElementsByName method in
JavaScript. This method is essential for DOM manipulation, allowing developers
to access elements by their name attribute.
Basic Definition
The document.getElementsByName method returns a NodeList collection
of elements with the specified name attribute. Unlike IDs, name attributes can
be shared by multiple elements.
This method is particularly useful for working with form elements like radio buttons and checkboxes that often share the same name. The returned NodeList is live, meaning it updates automatically when the document changes.
Basic getElementsByName
This example demonstrates how to access elements by their name attribute.
<!DOCTYPE html>
<html>
<head>
<title>Basic getElementsByName</title>
</head>
<body>
<input type="text" name="username" value="John">
<input type="text" name="username" value="Doe">
<script>
const elements = document.getElementsByName('username');
for (let i = 0; i < elements.length; i++) {
console.log(elements[i].value);
}
</script>
</body>
</html>
In this basic example, we have two input elements with the same name "username".
The JavaScript code retrieves these elements using getElementsByName
and logs their values to the console.
This demonstrates the fundamental usage of getElementsByName to
access multiple elements sharing the same name. The method returns a NodeList
that we can iterate through.
Working with Radio Buttons
This example shows how to use getElementsByName with radio buttons.
<!DOCTYPE html>
<html>
<head>
<title>Radio Buttons</title>
</head>
<body>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<button onclick="getSelectedGender()">Get Gender</button>
<script>
function getSelectedGender() {
const genders = document.getElementsByName('gender');
let selectedValue;
for (let i = 0; i < genders.length; i++) {
if (genders[i].checked) {
selectedValue = genders[i].value;
break;
}
}
alert('Selected gender: ' + selectedValue);
}
</script>
</body>
</html>
Here we have radio buttons for gender selection. When the button is clicked, the
getSelectedGender function uses getElementsByName to
find all radio buttons and determine which one is selected.
This demonstrates how getElementsByName is perfect for working with
radio button groups, which must share the same name to function as a group.
Modifying Multiple Elements
This example demonstrates how to modify multiple elements at once.
<!DOCTYPE html>
<html>
<head>
<title>Modifying Elements</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p name="content">First paragraph</p>
<p name="content">Second paragraph</p>
<p name="content">Third paragraph</p>
<button onclick="highlightContent()">Highlight Content</button>
<script>
function highlightContent() {
const paragraphs = document.getElementsByName('content');
for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].classList.add('highlight');
}
}
</script>
</body>
</html>
In this example, we have multiple paragraphs with the same name. When the button
is clicked, the highlightContent function adds a CSS class to all
matching elements.
This shows how getElementsByName can be used to apply changes to
multiple elements simultaneously. The NodeList returned is array-like but not an
actual array.
Form Validation
This example demonstrates form validation using getElementsByName.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<input type="checkbox" name="terms"> I agree to terms
<input type="checkbox" name="terms"> I agree to privacy policy
<button onclick="validateForm()">Submit</button>
<p id="message"></p>
<script>
function validateForm() {
const terms = document.getElementsByName('terms');
const message = document.getElementById('message');
let allChecked = true;
for (let i = 0; i < terms.length; i++) {
if (!terms[i].checked) {
allChecked = false;
break;
}
}
message.textContent = allChecked ?
'Form valid!' : 'Please check all boxes!';
}
</script>
</body>
</html>
Here we have checkboxes that all need to be checked for form validation. The
validateForm function checks if all boxes are checked using
getElementsByName.
This demonstrates a practical use case for getElementsByName in form
validation scenarios where multiple related inputs need to be checked.
Dynamic Element Creation
This example shows how to work with dynamically created elements.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Elements</title>
</head>
<body>
<button onclick="addItem()">Add Item</button>
<button onclick="countItems()">Count Items</button>
<div id="container"></div>
<script>
let counter = 1;
function addItem() {
const container = document.getElementById('container');
const newItem = document.createElement('div');
newItem.name = 'dynamic-item';
newItem.textContent = 'Item ' + counter++;
container.appendChild(newItem);
}
function countItems() {
const items = document.getElementsByName('dynamic-item');
alert('Total items: ' + items.length);
}
</script>
</body>
</html>
In this example, we dynamically add elements with the same name and then count
them using getElementsByName. This shows how the live NodeList
works.
The NodeList updates automatically as new elements are added, demonstrating the
live nature of collections returned by getElementsByName.
Source
MDN getElementsByName Documentation
In this article, we have shown how to use document.getElementsByName
in JavaScript. This method is essential for working with groups of related
elements in web development.
Author
List all JS DOM tutorials.