How To Count DOM-Elements Of A HTML-Page With jQuery | Example

by

It is very easy to count DOM-Elements within a HTML-file by using jquery. Here is a little example:

<!DOCTYPE html>
<html>
<head>
	<title>Count DOM-Elements Example</title>
	<meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {  
		  console.log("All Elements: "+$('*').length);
		  console.log("Elements in Body: "+$('body *').length);
		  console.log("Elements in #abc: "+$('#abc').length);
		});
	</script>
</head>
<body>
<p>1st Example-Paragraph</p>
<p>2nd Example-Paragraph</p>
<p id="abc">
	3rd Example-Paragraph
</p>
 
</body>
</html>

The console-output should look like this:

All Elements: 10
Elements in Body: 3
Elements in #abc: 1

To see the console, press F12 on Browsers like e.g. Chrome, IE, Firefox.

(Visited 1,237 times, 1 visits today)