DOM elements number counter and sum up

I wanna provide you with a nice utility for quick summing of multiple DOM element values. Why? Well, suppose you’ve at a page like this and you want to sum up the total number of hotels in all the countries. 

The JavaScript code

So open the page given and open your browser’s Dev tools (it’s F12 on PCs, Preferences -> Advanced -> Show Develop menu on Mac). Once they are open, go to Console (Console tab) and enter the following code:

function domCounter(selector){
	var a = document.querySelectorAll(selector); 
	var sum = 0;
	for(var i=0; i<a.length;i++){
		var temp = parseInt(a[i].innerHTML.replace(/[^\d]/g, ""));
		if(!isNaN(temp)){
			sum += temp;
		}
	}
	return sum;
}

Now based on the Dom element class attributes you again enter into the console:

domCounter("span.dci-country__hotel-num")

Full picture with results

Youtube channel views counter

One possible use case for this method would be to count a youtube video channel’s total views. Let’s sum up the channel’s total number of views.

1. Pick the xxx views (number of views for a single video) page element and find it in the DOM inspector (right click on target element -> Inspect element).The element of interest is the 2-nd li tag having ul parent tag with yt-lockup-meta-info class. See the DOM inspector picture below for video-time class.
   Now you insert in the browser console the above JavaScript and after that hit the following line in the console

   domCounter("ul.yt-lockup-meta-info li:nth-child(2)")

It’s important to not that the info notation to those videos should be in the following format: publishing date • number of views. The number of views should stand after the publishing date.
If their order is opposite, use the following domCounter() call:

domCounter("ul.yt-lockup-meta-info li:nth-child(1)")

Bookmarklet

I’ve composed a Chrome bookmarklet that quickly counts total views of a YouTube channel and pops the number up for you to copy/paste.

javascript:(function(){
	function domCounter(selector){
		var a = document.querySelectorAll(selector); 
		var sum = 0;
		for(var i=0; i<a.length;i++){
			var temp = parseInt(a[i].innerHTML.replace(/[<span class="pl-k">^</span><span class="pl-c1">\d</span>]/g, ''));
			if(!isNaN(temp)){
				sum += temp;
			}
		}
		return sum;
	} 
	var a = prompt('Dom counter is executed. Total channel views are', domCounter('ul.yt-lockup-meta-info li:nth-child(2)')
	);
})();

You can quickly try it on my youtube channel (for Google Chrome or FireFox). Have this useful sum up utility for your convenience.

Acknowledgement

The Dom counter code has been graciously provided to us by Adrian Balcan from thewebminer.com. You can track any updates here.