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