div元素调用getElementsByName报错，如何统计指定name的元素数量？

问题原因 #

你碰到这个错误的核心原因很明确：getElementsByName()是document对象独有的方法，没办法在普通DOM元素节点（比如你代码里的ii，也就是id为box的<div>）上调用它。这个方法只能从整个文档范围查找元素，不能限定在某个父元素的子树里。

解决方案 #

这里给你两种实用的修复方式，按需选择：

方案1：使用querySelectorAll()（推荐）

querySelectorAll()是所有DOM元素都支持的方法，它允许你用CSS选择器精准定位元素，完全适配“在指定父元素下查找name为'A'的元素”的需求：

<div id="box"> 
  <input name="A" value="123"> 
  <input name="A" value="456"> 
</div> 
<script type="text/javascript">
  var ii = document.getElementById("box");
  // 用CSS属性选择器定位name="A"的子元素
  var hh = ii.querySelectorAll('[name="A"]');
  alert(hh.length); // 现在会正确返回2
</script>

querySelectorAll()返回的是静态NodeList，你可以直接通过.length获取元素数量，用法和你原本预期的一致。

方案2：从全局结果中过滤指定父元素的子元素

如果你一定要用getElementsByName()，可以先从整个文档中获取所有name为'A'的元素，再过滤出属于目标父元素的后代：

<div id="box"> 
  <input name="A" value="123"> 
  <input name="A" value="456"> 
</div>
<input name="A" value="789"> <!-- 这个外部元素不会被统计 -->
<script type="text/javascript">
  var ii = document.getElementById("box");
  var allNameAElements = document.getElementsByName('A');
  // 把动态NodeList转为数组，再过滤出ii的后代元素
  var targetElements = Array.from(allNameAElements).filter(el => ii.contains(el));
  alert(targetElements.length); // 返回2
</script>

这种方法需要注意getElementsByName()返回的是动态NodeList，转成数组后处理会更灵活。

小提示 #

对比两种方案，querySelectorAll()更直观高效，尤其是需要限定查找范围时，它的CSS选择器语法还支持更复杂的筛选规则，建议优先使用。

内容的提问来源于stack exchange，提问作者Korty