getElementsByName 返回 HTMLCollection，需索引或遍历获取元素；仅对带 name 属性的表单元素有效；处理多选时须遍历检查 checked 或 value。
getElementsByName 返回的是一个 HTMLCollection（类数组对象），不是单个元素，必须通过索引或遍历获取具体元素。
基本用法：按 name 属性查找
该方法只对具有 name 属性的表单元素有效（如 <input>、<select>、<textarea>、<button>、<form>）。注意：id 或 class 不起作用。
示例 HTML：
<input type="text" name="username"><input type="password" name="password">
<input type="checkbox" name="hobby" value="reading">
<input type="checkbox" name="hobby" value="coding">
JS 获取方式：
立即学习“Java免费学习笔记（深入）”；
const hobbies = document.getElementsByName('hobby'); // 多个 checkbox，返回 HTMLCollection
处理多个同名元素（如复选框、单选按钮）
当多个元素共享同一个 name（如多选的 hobby），需遍历 HTMLCollection 判断是否被选中：
- 用
for循环或Array.from()转为数组再用forEach - 检查
element.checked（checkbox/radio）或element.value（文本类） - 避免直接用
hobbies[0].value取全部值——它只返回第一个
例如获取所有选中的 hobby：
const hobbyBoxes = document.getElementsByName('hobby');const selected = [];
for (let i = 0; i if (hobbyBoxes[i].checked) {
selected.push(hobbyBoxes[i].value);
}
}
注意兼容性与常见误区
-
getElementsByName在所有现代浏览器和 IE6+ 中都支持，无需 polyfill - 返回值是动态的
HTMLCollection，DOM 变化会自动更新其内容 - 不能用点语法直接调属性（如
hobbies.value），必须先取下标 -
name值区分大小写，且空格、特殊字符需与 HTML 中完全一致
替代方案建议
如果需要更灵活的选择（比如结合 class、type 或 CSS 选择器），推荐使用：
-
document.querySelector('input[name="username"]')—— 返回首个匹配元素 -
document.querySelectorAll('input[name="hobby"]')—— 返回静态 NodeList，支持 forEach - 对表单整体操作，也可用
form.elements['name']（需先获取 form 元素）
这些方式语义更清晰、API 更现代，尤其适合复杂场景。
