Document:getElementsByName()使用方法及示例

当你需要获取带有相同名称的元素时（例如 input 标签），你可以使用 Document 对象的 getElementsByName() 方法。

语法

document.getElementsByName(name)

参数

name：元素的名称，字符串类型。

返回值

返回一个包含指定名称的所有元素的 NodeList（节点列表）。

示例一：获取单选按钮的状态

HTML代码：

<label><input type="radio" name="gender" value="male">男</label>
<label><input type="radio" name="gender" value="female">女</label>

JavaScript代码：

let radios = document.getElementsByName("gender");
for(let i=0; i<radios.length; i++){
  if(radios[i].checked){
    console.log("您选择了"+radios[i].value);
  }
}

运行以上代码，当选择单选按钮后，将选中的单选按钮值输出到控制台。

示例二：按名称获取所有文本框的值

HTML代码：

<input type="text" name="username" value="张三">
<input type="text" name="password" value="12345">
<input type="text" name="email" value="[e-mail]">

JavaScript代码：

let inputs = document.getElementsByName("username");
for(let i=0; i<inputs.length; i++){
  console.log(inputs[i].value);
}

运行以上代码，将会输出文本框中的值。

这两个示例分别介绍了如何使用 getElementsByName() 方法获取单选按钮的状态和获取所有文本框的值。通过这些示例，你可以更好地理解和掌握如何使用 getElementsByName() 方法。