摘要: 在本教程中，您将学习如何使用 JavaScript getElementsByName() 方法获取文档中具有给定名称的元素。
JavaScript getElementsByName() 方法简介
HTML 文档中的每个元素都可以具有一个 name 属性
<input type="radio" name="language" value="JavaScript">Code language: HTML, XML (xml)与 id 属性不同，多个 HTML 元素可以共享 name 属性的相同 value，例如
<input type="radio" name="language" value="JavaScript">
<input type="radio" name="language" value="TypeScript">Code language: HTML, XML (xml)要获取所有具有指定名称的元素，您可以使用 document 对象的 getElementsByName() 方法
let elements = document.getElementsByName(name);Code language: JavaScript (javascript)getElementsByName() 接受一个 name，它是元素 name 属性的值，并返回一个包含元素的实时 NodeList。
返回的元素集合是实时的。这意味着当具有相同名称的元素被 插入 和/或 删除 文档时，返回的元素会自动更新。
JavaScript getElementsByName() 示例
以下示例显示了一个包含 单选按钮 的单选按钮组，它们具有相同的名称（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>Code language: HTML, XML (xml)工作原理
- 首先，使用
getElementById()方法通过其 idbtnRate选择提交按钮。 - 其次，监听提交按钮的 点击 事件。
- 第三，使用
getElementsByName()获取所有单选按钮，并在输出元素中显示选定的值。
请注意，您将在稍后了解 click 之类的 事件。现在，您需要专注于 getElementsByName() 方法。
总结
getElementsByName()返回一个包含具有指定名称的元素的实时NodeList。NodeList是一个类似数组的对象，而不是一个 数组 对象。
测验
本教程是否有帮助？
