Quick Answer: Count the Number of Child Elements in DOM

Sometimes I come across the need to count the number of child elements in any given area of the DOM. Below is an example of how to count the number of elements by using the getElementsByTagName() function.

<html>

<head>
<script language = "Javascript">
function countChildElements(parent, child)
     {
          var parent = document.getElementById(parent);
          var childCount = parent.getElementsByTagName(child).length;
          alert(childCount);
     }
</script>
</head>
<body>
<ul id = "listing">
 <li>List Item 1</li>
 <li>List Item 2</li>
 <li>List Item 3</li>
</ul>
<input type = "button" value = "Count <li>" onClick="countChildElements('listing','li');" />
</body>
</html>

When you click the button, the browser will alert you to the number of child <li> elements to the “listing” <ul>.

Possibly related posts: (automatically generated)

This entry was posted on Sunday, December 30th, 2007 at 9:32 am and is filed under Javascript, Quick Answers. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Quick Answer: Count the Number of Child Elements in DOM”

  1. Katy Says:
    February 12, 2008 at 2:41 am | Reply

    Thanks for this! I’ve been looking for something like this for days! :)

  2. pepie Says:
    June 11, 2008 at 2:13 am | Reply

    Although this looks good, it does not work if you’re HTML has nested LI items
    like this:

    List Item 1
    nested item

    List Item 2
    List Item 3

  3. __ak Says:
    July 23, 2008 at 3:44 am | Reply

    Be carefull with using “parent” as variable name.
    “parent” is global.

Leave a Reply