How can I count the number of elements in a DOM?

Question

I'd like to learn to count the number of elements in the body or within a specific div in my DOM with javascript. What's a simple way to do this accurately?

There don't seem to be any tutorials for this that I can find, so I figured it'd be a good question for SO.

Answer 1

The easiest way is simply:

var numOfElements = document.getElementsByTagName('*').length;

Or, to find those elements within a given element:

var element = document.getElementById('demo'),
    numElems = element.getElementsByTagName('*').length;

Answer 2

You can use querySelectorAll to quickly select elements using CSS selectors. You you want to count every single element you can just do:

var num = document.querySelectorAll('*').length;

If you want to count all elements in a div you can do this:

var num = document.querySelectorAll('#id *').length;

Answer 3

Using document.all works on some of the browser, in future will be deprecated dont use on production.

document.all.length

Using jQuery, just in case!

$('*').length;