HTML element statistics of the current page

Question

Within Firefox, I’m looking for a way to show which HTML elements are used how many times on the current page.

It must display all used HTML elements (even invalid ones) and their count (→ sorted), e.g. like:

16 div 
13 span
 7 a
 5 p
 3 h1
 2 article
 2 h2
 1 body
 1 head
 1 html
 1 spoiler

It would be nice if it also takes elements removed/added by JavaScript into account; at best it should simply use the current DOM of when I start the tool.

I’d prefer an extension (displayed in the sidebar), but I’m open for other solutions (bookmarklet?). Displaying the list should not require more than a click or key combo.

A solution must be FLOSS.

Answer 1

Self-made solution

• Tested with Firefox and Chrome. IE doesn't work yet.
• It takes a live representation of the DOM into account
• Free and open-source (MIT license)

Screenshot

Do you need any prettier interface?

General

This is quite easy to achieve using a TreeWalker:

Source code as a GitHub Gist: https://gist.github.com/ComFreek/0ea3de26530f0d85ceb4

How to install

1. Go to http://subsimple.com/bookmarklets/jsbuilder.htm
2. Paste my code into the white text box
3. Change the bookmarklet's name
4. Click compress
5. Drag the link at the bottom of the page to your bookmark bar

Current source code

Better use the GitHub Gist link provided above. I'll always update there first. The code below is provided for the archive.

/**
 * A bookmarklet, which displays the number of occurrences of each HTML tag in the DOM
 * 
 * @author ComFreek
 * @license MIT
 * @link http://softwarerecs.stackexchange.com/a/10329/583
 */


function getTagCounts() {
    var treeWalker = document.createTreeWalker(document.documentElement, NodeFilter.SHOW_ELEMENT);

    var tagCounts = {};
    while (treeWalker.nextNode()) {
        var node = treeWalker.currentNode;
        if (!(node.tagName in tagCounts)) {
            tagCounts[node.tagName] = 0;
        }
        tagCounts[node.tagName]++;
    }
    return tagCounts;
}

function convToArray(tagCounts) {
    // to array
    var tags = [];

    for (var tagName in tagCounts) {
        if (tagCounts.hasOwnProperty(tagName)) {
            tags.push({tagName: tagName, count:  tagCounts[tagName]});
        }
    }
    return tags;
}

function sortCompareFn(tagA, tagB) {
    if (tagA.count > tagB.count) {
        return -1;
    }
    else if (tagA.count < tagB.count) {
        return 1;
    }
    else {
        return 0;
    }
}

function arrayToSimpleStr(tags) {
    // output
    var str = "";
    for (var i=0; i<tags.length; i++) {
        str += tags[i].tagName;
        str += ": ";
        str += tags[i].count;
        str += "\n";
    }
    return str;
}

var sortedTagCounts = convToArray(getTagCounts()).sort(sortCompareFn);
alert(arrayToSimpleStr(sortedTagCounts));

Answer 2

Same as @ComFreek's answer but less code (and not sorted)

tags = {};
elems = document.querySelectorAll('*');
for(i = 0; i < elems.length; i++){
    if(tags[ elems[i].tagName ]) tags[ elems[i].tagName ]++;
    else tags[ elems[i].tagName ] = 1;
}
alert(JSON.stringify(tags,null,'\t'));

You can add this as an URL to your bookmarks:

javascript:tags={};elems=document.querySelectorAll('*');for(i=0;i<elems.length;i++){    if(tags[elems[i].tagName])tags[elems[i].tagName]++;else tags[elems[i].tagName]=1;}alert(JSON.stringify(tags,null,'\t'));