参考资料

1. HTML DOM 返回图像映射的某个区域的hostname实例
2. HTML DOM 哪个元素被按下了？
3. HTML DOM 返回文档的最后一次修改时间 实例
4. HTML DOM 对image排版
5. HTML DOM改变单元格横跨的列数(colspan属性)
6. HTML DOM 返回表单中的enctype属性的值
7. HTML DOM 鼠标的坐标？
8. HTML DOM 节点列表长度

HTML DOM 用指定的Name弹出元素的数量实例

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;
}