getElementById VS jQuery('#id')

JavaScript performance comparison

Revision 116 of this test case created

Preparation code

<script src="http://code.jquery.com/jquery-1.8.1.min.js">
</script>
<script>
/**
* main.ts
* Created by xperiments on 08/04/14.
*/
/**
* dom.ts
* Created by xperiments on 07/04/14.
*/
var pulsar;
(function (pulsar) {
    (function (core) {
        function _$(selector, context) {
            if (typeof context === "undefined") { context = document; }
            // an object containing the matching keys and native get commands
            var matches = {
                '#': 'getElementById',
                '.': 'getElementsByClassName',
                '@': 'getElementsByName',
                '=': 'getElementsByTagName',
                '*': 'querySelectorAll'
            }[selector[0]];

            // now pass the selector without the key/first character
            var el = context[matches](selector.slice(1));

            // if there is one element than return the 0 element
            return ((el.length < 2) ? [el[0]] : Array.prototype.slice.call(el));
       }

       function dom(selector, context) {
           if (typeof context === "undefined") { context = document; }
           return new Dom(_$(selector, context));
       }
       core.dom = dom;

       var Dom = (function () {
           function Dom(collection) {
               if (typeof collection === "undefined") { collection = []; }
               this.collection = collection;
           }
           Dom.prototype.at = function (id) {
               return this.collection[id];
           };
           Dom.prototype.each = function (fn) {
               this.collection.map(fn);
               return this;
           };
           Dom.prototype.find = function (selector) {
               if (this.collection.length > 1) {
                    var result = [];
                    this.each(function (el) {
                        dom(selector, el).each(function (lel) {
                            return result.push(lel);
                        });
                    });
                    var d = new Dom();
                    d.collection = result;
                    return d;
                } else {
                    return dom(selector, this.collection[0]);
                }
            };
            Dom.prototype.attr = function (name, value) {
                if (!value)
                    return this.collection[0].getAttribute(name);
                this.each(function (el) {
                    return el.setAttribute(name, value);
                });
                return this;
            };

            Dom.prototype.css = function (prop, value) {
                var _this = this;
                if (typeof prop === "object") {
                    Object.keys(prop).map(function (key) {
                        return _this.each(function (el) {
                            return el.style[key] = prop[key];
                        });
                    });
                } else {
                    if (!value)
                        return this.collection[0].style[prop];
                    this.each(function (el) {
                        return el.style[prop] = value;
                    });
                }
                return this;
            };
            Dom.prototype.addClass = function (name) {
                this.each(function (el) {
                    el.classList.add(name);
                });
            };
            Dom.prototype.removeClass = function (name) {
                this.each(function (el) {
                    el.classList.remove(name);
                });
            };
            Dom.prototype.hasClass = function (name) {
                return this.collection[0].classList.contains(name);
            };

            Dom.prototype.first = function () {
                var d = new Dom();
                d.collection.push(this.collection[0]);
                return d;
            };
            Dom.prototype.last = function () {
                var d = new Dom();
                d.collection.push(this.collection[this.collection.length - 1]);
                return d;
            };
            return Dom;
        })();
        core.Dom = Dom;
    })(pulsar.core || (pulsar.core = {}));
    var core = pulsar.core;
})(pulsar || (pulsar = {}));
var dom = pulsar.core.dom;

Preparation code output