JavaScriptでDOMツリーの要素を数えあげる

Chrome developer toolとかFirebugでDOMツリーの内容は見れるのですが、エレメント数をさくっと集計することはできなそうだったので、JSで実装しました。

JavaScriptコンソールにコピペして、

DOMTreeUtil.countTags(document.body);

などとすれば、引数のDOM要素以下をタグ名ごとに集計されます。
firefox addonとかchrome extensionとか探せばありそうだったな。

	var DOMTreeUtil = (function() {
    var visitAll = function(root, func) {
        _visit(root, func);
    };
    var _visit = function(elem, func) {
        if (!elem.hasChildNodes) return;
        var i, l;
        var child = elem.childNodes;
        for (i = 0, l = child.length; i < l; i++) {
            func(child[i]);
            _visit(child[i], func);
        }
    };

    var countTags = function(root) {
        var result = {};
        visitAll(root, function(elem) {
            if (elem.nodeType == Node.TEXT_NODE) {
                if (!result['text']) {
                    result['text'] = 0;
                }
                result['text']++;
            }
            else if (!result[elem.tagName]) {
                result[elem.tagName] = 1;
            } else {
                result[elem.tagName]++;
            }
        });
        return result;
    };

    return {
        visitAll: visitAll,
        countTags: countTags
    };
})();