jQUery Selectors vs Native API (v24)

Revision 24 of this benchmark created on

Preparation HTML

<div id="testid"></div>
<div class="testclass"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.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; }
            var el;
            var key = selector[0];
            switch (key) {
                case '#':
                    el = document.getElementById(selector.slice(1));
                    break;
                case '.':
                    el = document.getElementsByClassName(selector.slice(1));
                    break;
                case '@':
                    el = document.getElementsByName(selector.slice(1));
                    break;
                case '=':
                    el = document.getElementsByTagName(selector.slice(1));
                    break;
                case '*':
                    el = context.querySelectorAll(selector.slice(1));
                    break;
            }

            // check 4 nodelist convert to plain array
            if (el.length < 2) {
                return [el[0]];
            } else {
                var arr = [], i = 0, k = arr.length = el.length;

                for (; i < k; i++) {
                    arr[i] = el[i];
                }
                return arr;
            }
        }

        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) {
                var _this = this;
                name.split(' ').map(function (className) {
                    _this.each(function (el) {
                        el.classList.add(className);
                    });
                });
                return this;
            };
            Dom.prototype.removeClass = function (name) {
                var _this = this;
                name.split(' ').map(function (className) {
                    _this.each(function (el) {
                        el.classList.remove(className);
                    });
                });
                return this;
            };
            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;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
document.getElementById("testid");
ready
jQuery ID Selector
$("#testid");
ready
Native ECMA5
document.querySelector("#testid");
ready
Native ECMA5
document.querySelector(".testclass");
ready
Jquery By class
$(".testclass");
 
ready
Native
document.getElementsByClassName("testClass");
ready
dom id
dom('#testid');
ready
dom class
dom('.testClass');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.