12

How to count the total number of div elements that are contained in another div using javascript?

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • You weed out a lot of JavaScript developers (sort of me too) when you don't include the jQuery tag! – alex Feb 12 '10 at 04:51
  • 1
    @alex: So what? This has nothing to do with jQuery, and the OP may not be in a situation where he can use jQuery, or indeed he/she may not want to use jQuery. Frankly, for a non-jQuery question I'd rather not have the help of people who only look at questions tagged with jQuery and not with JavaScript. – Tim Down Feb 12 '10 at 09:38

3 Answers3

26

The getElementsByTagName() is not only a document method, but one that can run on any DOM element.

element.getElementsByTagName is similar to document.getElementsByTagName, except that its search is restricted to those elements which are descendants of the specified element

see more at https://developer.mozilla.org/en/DOM/element.getElementsByTagName

So the actual code that does what you ask is

var container_div = document.getElementById('id_of_container_div');
var count = container_div.getElementsByTagName('div').length;
Damir Temir
  • 20
  • 1
  • 1
  • 5
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • 1
    getElementsByTagName isn't available in browsers other than ones that use the Gecko engine. Try it in IE6. – amphetamachine Feb 12 '10 at 04:46
  • I was pretty sure `getElementsByTagName` was in IE6? – alex Feb 12 '10 at 04:49
  • 2
    @amphetamachine Then I wonder why this page: http://msdn.microsoft.com/en-us/library/ms536439(VS.85).aspx says "this feature needs Microsoft Internet Explorer 5 or later" ;) `getElementsByTagName` **is** available in IE6 – Doug Neiner Feb 12 '10 at 04:50
  • 6
    Haha, random moment where IE6 doesn't fall over. – alex Feb 12 '10 at 04:51
1

You can use @davidcmoulton's handy Gist: https://gist.github.com/davidcmoulton/a76949a5f35375cfbc24

I find it quite useful that it doesn't only count DIVs but also lists the count of all element types of your page.

Here is a copy of the Gist for further reference:

(function (window, undefined) {
//  Counts all DOM elements by name & logs resulting object to console. 
var forEach = Array.prototype.forEach,
counter = {},

incrementElementCount = function (elementName) {
  if (counter.hasOwnProperty(elementName)) {
    counter[elementName] += 1;
  } else {
    counter[elementName] = 1;
  }
},

processNode = function (node) {
  var currentNode = node;
  if (currentNode.nodeType === currentNode.ELEMENT_NODE) {
    incrementElementCount(currentNode.nodeName);
    if (currentNode.hasChildNodes) {
      forEach.call(currentNode.childNodes, function (childNode) {
        if (childNode.nodeType === currentNode.ELEMENT_NODE) {
          processNode(childNode);
        }
      });
    }
  }
};

processNode(window.document.firstElementChild);

console.log(counter);

}(this));
David Salamon
  • 2,361
  • 25
  • 30
0

There are many way to count divs element using jquery.

But most popular and simple way are:

$(document).ready(function(){ 
  var divCount = $("div").size();
  alert(divCount);
});

AND

$(document).ready(function(){ 
  var divCount = $("div").length;
  alert(divCount);
});

Its helpful for you

user1972007
  • 323
  • 3
  • 19