JavaScript getElementsByName 方法
getElementsByName 方法获取 HTML 文档具有指定 name 属性的元素，返回实时的 NodeList，意味着插入或删除具有相同名称的元素时，NodeList 元素会自动更新
3 min read
By
myfreax
在本教程中，您将学习如何使用 JavaScript getElementsByName 方法获取 HTML 文档中具有指定 name 属性的元素。
JavaScript getElementsByName 方法简介
在 HTML 文档你可以为每个元素指定一个 name 属性：
<input type="radio" name="language" value="JavaScript">
与 id 属性不同，多个 HTML 元素可以具有相同的 name 属性值，如下所示：
<input type="radio" name="language" value="JavaScript">
<input type="radio" name="language" value="TypeScript">要获取具有指定 name 属性的所有元素，可以使用 document对象的 getElementsByName 方法：
let elements = document.getElementsByName(name);
getElementsByName 接受元素 name 属性的值并返回节点列表 NodeList。getElementsByName 方法返回的元素集合是实时的。
这意味着当在 HTML 文档中插入或删除具有相同 name 属性值的元素时，返回 NodeList 元素会自动更新。类似于双向绑定的概念。
JavaScript getElementsByName 示例
下面的示例由单选按钮组成的单选按钮组，它们具有相同 name 属性值 rate 。当您选择单选按钮并单击提交按钮时，页面将显示所选值。
例如 Very Poor、Poor、OK、Good 或 Very Good：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript getElementsByName Demo</title>
</head>
<body>
<p>Please rate the service:</p>
<p>
<label for="very-poor">
<input type="radio" name="rate" value="Very poor" id="very-poor"> Very poor
</label>
<label for="poor">
<input type="radio" name="rate" value="Poor" id="poor"> Poor
</label>
<label for="ok">
<input type="radio" name="rate" value="OK" id="ok"> OK
</label>
<label for="good">
<input type="radio" name="rate" value="Good"> Good
</label>
<label for="very-good">
<input type="radio" name="rate" value="Very Good" id="very-good"> Very Good
</label>
</p>
<p>
<button id="btnRate">Submit</button>
</p>
<p id="output"></p>
<script>
let btn = document.getElementById('btnRate');
let output = document.getElementById('output');
btn.addEventListener('click', () => {
let rates = document.getElementsByName('rate');
rates.forEach((rate) => {
if (rate.checked) {
output.innerText = `You selected: ${rate.value}`;
}
});
});
</script>
</body>
</html>代码是如何运行的：
- 首先，使用
getElementById方法通过 id 属性btnRate选择提交按钮元素。 - 其次，监听提交按钮的点击事件。
- 最后，使用
getElementsByName方法获取所有单选按钮并在 id 属性是 output 的元素显示所选的值。
稍后您将了解 click 事件。现在，您只需关注 getElementsByName 方法即可。
结论
getElementsByName 返回具有指定 name 属性元素列表 NodeList。NodeList一个类似数组的对象，而不是数组对象。
