javascript - 用js计算html元素个数

Question

我有多个具有相同 id='mydiv' 的 div 元素。我想使用代码计算这些 div 和 Iam

document.getElementById('mydiv').length

但它不工作

Answer 1

你应该做的是使用类而不是 ID。ID 仅用于一个元素，class 用于多个。

http://jsfiddle.net/d7AHV/

Answer 2

它不起作用，因为getElementById总是返回具有指定 ID 的元素，如果指定的 ID 不存在，则返回 null

来自ECMA

 getElementById(elementId) This method returns a Element. The elementId
    parameter is of type DOMString.

您可以做的是为每个 div 分配类

<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>​​​​​​​​​

并迭代：

var divs = document.getElementsByTagName('div');
var count = 0;
for(var i = 0; i < divs.length; i++) {
    if(divs[i].className == 'mydiv') count++;
}

alert(count);

如果您的客户支持document.getElementsByClassName()，那就更简洁了：

alert(document.getElementsByClassName('mydiv').length)

Answer 3

您已被告知具有相同 ID 的多个元素，但在极少数情况下这可能是不可避免的（例如，您无法控制的 XML 文档）。唯一不利的行为是按 ID 选择通常只会返回第一个（但不能保证）。

您可以通过遍历文档中的所有元素并计算具有匹配 id 的元素来计算具有相同 id 的元素，例如

function countSameIds(id) {
  var allNodes = document.getElementsByTagName('*');
  for (var i=allNodes.length, count=0; i; ) {
    if (allNodes[--i].id == id) {
      ++count;
    }
  }
  return count;
}