在本教程中，您将学习如何使用 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一个类似数组的对象，而不是数组对象。