Run results for: Get element by class

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser: Chrome 123

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

vanilla js

7.7M/s

jquery

1.8M/s

custom

515K/s

View exact numbers

Test name	Executions per second
✓ vanilla js	7,745,150 Ops/sec
jquery	1,790,880 Ops/sec
custom	515,416 Ops/sec

HTML Preparation code:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<div class="myDiv"></div>

Script Preparation code:

function getElement(selector, single, pos) {
    var el;

    // return single node
    // only runs if [single] is undefined
    if(single == undefined) el = document.getElementById(selector) || document.querySelector(selector);

    if(el == null) {
        if(single == false) {
            // return nodelist
            el = document.getElementsByClassName(selector);
            if(el.length == 0) el = document.getElementsByTagName(selector);
            if(el.length == 0) el = document.querySelectorAll(selector);
            if(el.length == 0) el = getElementsByClassName(selector);
        } else {
            // return single node from nodelist
            pos = (pos == null) ? 0 : pos;       // if arrayPos null, default to 0

            el = document.getElementsByClassName(selector)[pos] ||
                 document.getElementsByTagName(selector)[pos]   ||
                 document.querySelectorAll(selector)[pos]       ||
                 getElementsByClassName(selector)[pos];
        }
    }

    return el;
}

Tests:

vanilla js
var el = document.getElementsByClassName('myDiv')[0]; var classname = el.className;
jquery
var el = $('.myDiv')[0]; var classname = el.className;
custom
var el = getElement('myDiv'); var classname = el.className;