JavaScript getElementsByName
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 document.getElementsByName 方法。此方法对于 DOM 操作至关重要，它允许开发人员通过 name 属性访问元素。
基本定义
document.getElementsByName 方法返回一个 NodeList 集合，其中包含具有指定 name 属性的元素。与 ID 不同，name 属性可以被多个元素共享。
此方法特别适用于处理表单元素，例如单选按钮和复选框，它们通常共享相同的名称。返回的 NodeList 是动态的，这意味着当文档发生更改时，它会自动更新。
基本 getElementsByName
此示例演示了如何通过 name 属性访问元素。
<!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>
在此基本示例中，我们有两个具有相同名称“username”的输入元素。JavaScript 代码使用 getElementsByName 检索这些元素，并将它们的值记录到控制台中。
这展示了 getElementsByName 的基本用法，可以访问共享相同名称的多个元素。该方法返回一个我们可以迭代的 NodeList。
使用单选按钮
此示例展示了如何将 getElementsByName 用于单选按钮。
<!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>
这里我们有用于性别选择的单选按钮。当点击按钮时，getSelectedGender 函数使用 getElementsByName 来查找所有单选按钮并确定哪个被选中。
这表明 getElementsByName 非常适合处理单选按钮组，因为它们必须共享相同的名称才能作为一个组运行。
修改多个元素
此示例演示了如何一次修改多个元素。
<!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>
在此示例中，我们有多个具有相同名称的段落。当点击按钮时，highlightContent 函数会将 CSS 类添加到所有匹配的元素。
这表明 getElementsByName 可用于同时对多个元素应用更改。返回的 NodeList 类似于数组，但不是真正的数组。
表单验证
此示例演示了使用 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>
这里我们有所有需要被勾选才能进行表单验证的复选框。validateForm 函数使用 getElementsByName 检查所有复选框是否被勾选。
这演示了 getElementsByName 在表单验证场景中的实际用途，在这些场景中需要检查多个相关输入。
动态元素创建
此示例展示了如何处理动态创建的元素。
<!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>
在此示例中，我们动态添加了具有相同名称的元素，然后使用 getElementsByName 计数。这展示了动态 NodeList 的工作原理。
当添加新元素时，NodeList 会自动更新，这表明了 getElementsByName 返回的集合的动态特性。
来源
在本文中，我们展示了如何在 JavaScript 中使用 document.getElementsByName。此方法对于在 Web 开发中处理相关元素组至关重要。
作者
列出 所有 JS DOM 教程。