Firefox Or JavaScript, count the DOM

Question

I'm sure this is simple but I have no idea how to do it. How do i count the amount of DOM elements in my HTML page? I wanted to do this in a userscript or bookmarklet but i have no idea how to start!

Do you want to know about the DOM nodes or DOM nodes that are HTML elements? The DOM includes things like text, comments, and attributes as nodes. — edeverett, Feb 10 '10 at 12:48

Gumbo · Accepted Answer · 2013-07-08T20:18:54.900

60

Use this for Element nodes:

document.getElementsByTagName("*").length

For any node, you can extend Node like this:

Node.prototype.countChildNodes = function() {
  return this.hasChildNodes()
    ? Array.prototype.slice.apply(this.childNodes).map(function(el) {
        return 1 + el.countChildNodes();
      }).reduce(function(previousValue, currentValue, index, array){
        return previousValue + currentValue;
      })
    : 0;
};

Then all you need to do is to call document.countChildNodes.

edited Jul 08 '13 at 20:18

answered Feb 10 '10 at 12:39

Gumbo

643,351
109
780
844

is there any way to add the number of elements inside iframes? – corretge Jan 24 '12 at 14:13
@corretge That would be possible if you have access to the `contentDocument`. Just iterate the elements you get with `document.getElementsByTagName("*")` and count them as 1 and for each `iframe` element node (`tagName==='IFRAME'`) add the number of elements in its `contentDocument` instead. – Gumbo Jan 24 '12 at 15:59
Thanks a lot! I have another 'little' problem: Domains, protocols and ports must match. Normal :) – corretge Jan 24 '12 at 17:36
@corretge That’s due to [security reasons](http://www.w3.org/Security/wiki/Same_Origin_Policy). – Gumbo Jan 24 '12 at 19:49
2

This is not an actual count of all the dom nodes. It is a count of all of the elements within the document. Not including attributes, AJAX'ed XML and so on. So this is very inaccurate – Blowsie Jan 04 '13 at 10:33
@Blowsie The question was: “How do i count the amount of DOM elements in my HTML page?“ So why should I count all nodes? – Gumbo Jan 04 '13 at 18:27
So what is the best way to count *all* nodes including ajax'd xml, etc.? – JD Smith Jul 08 '13 at 20:02
To address the comments by @Blowsie and @JDSmith: The first and second solutions in this answer do two different things. The first method only counts Element nodes, it doesn't count other DOM nodes like text nodes. The second method (`document.countChildNodes();`) counts all descendant nodes. So, for example, I just ran both methods on a random HTML page, the first returned a count of 202, the second a count of 454. – joelhardi Jan 13 '20 at 16:26

kennebec · Answer 2 · 2010-02-10T16:58:55.217

// You could use the same method to get the count of each tag, if it matters

  function tagcensus(pa){
    pa= pa || document;
    var O= {},
    A= [], tag, D= pa.getElementsByTagName('*');
    D= A.slice.apply(D, [0, D.length]);
    while(D.length){
        tag= D.shift().tagName.toLowerCase();
        if(!O[tag]) O[tag]= 0;
        O[tag]+= 1;
    }
    for(var p in O){
        A[A.length]= p+': '+O[p];
    }
    A.sort(function(a, b){
        a= a.split(':')[1]*1;
        b= b.split(':')[1]*1;
        return b-a;
    });
    return A.join(', ');
}

alert(tagcensus())

aWebDeveloper · Answer 3 · 2014-04-25T14:40:56.740

2

In JavaScript you can do

document.getElementsByTagName("*").length

In jQuery you can do

jQuery('*').length

edited Apr 25 '14 at 14:40

answered Feb 04 '14 at 13:59

aWebDeveloper

36,687
39
170
242

Firefox Or JavaScript, count the DOM

3 Answers3