javascript - jsでhtml要素の数を計算する

Question

同じid='mydiv'の複数のdiv要素があります。コードを使用してこれらのdivとIamを計算したい

document.getElementById('mydiv').length

しかし、それは機能していません

Answer 1

IDの代わりにクラスを使用する必要があります。IDは1つの要素のみ、クラスは複数の要素用です。

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が一致する要素を数えることで、同じIDの要素を数えることができます。

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