参考资料

1. HTML DOM添加表格行中的单元格
2. HTML DOM 返回一个iframe中的longdesc属性的值
3. HTML DOM 访问
4. HTML DOM 返回一个表单中元素的数量 实例
5. HTML DOM 返回一个button所属表的ID 实例
6. HTML DOM 给image加上border
7. HTML DOM 返回image的name
8. HTML DOM 对iframe排版

HTML DOM 获取指定Name元素数量

详细介绍

HTML DOM 提供了多种方法来获取页面上的元素，其中通过name属性获取元素是常见方式之一。document.getElementsByName()方法可以返回带有指定name属性的所有元素集合。

标签

name属性可以应用于多种HTML元素，常见的有：

• <input>

• <select>

• <textarea>

• <button>

• <form>

• <meta>

• <map>

• <param>

• <object>

用法

var elements = document.getElementsByName(name);

• 返回一个NodeList集合（类似数组的对象）

• 可以通过length属性获取元素数量

• 可以通过索引访问具体元素

实例

<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="banana"> Banana
<input type="checkbox" name="fruit" value="orange"> Orange

<script>
var fruitElements = document.getElementsByName("fruit");
alert("找到 " + fruitElements.length + " 个水果选项");
</script>

功能

• 统计表单中相同name的元素数量

• 批量操作相同name的元素

• 验证必填项是否填写

• 获取单选按钮或复选框的选择状态

CSS扩展

虽然CSS不能直接选择name属性，但可以通过属性选择器间接实现：

/* 选择所有name为"fruit"的元素 */
[name="fruit"] {
  border: 1px solid #ccc;
  padding: 5px;
}

/* 选择name以"user_"开头的元素 */
[name^="user_"] {
  background-color: #f0f0f0;
}

/* 选择name包含"email"的元素 */
[name*="email"] {
  color: blue;
}