Run results for: querySelector vs. getElementsByClassName nested dom

Run details:

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Mobile Safari/537.36

Browser: Chrome Mobile 124

Operating system: Android

Device Platform: Mobile

Date tested: 2 years ago

Test name	Executions per second
querySelector	2194322.2 Ops/sec
getElementsByClassName	2061792.9 Ops/sec

HTML Preparation code:

<div>
    <div>
        <div>
            <div>
            </div>
        </div>
        <div>
            <div class="test">
            </div>
        </div>
        <div>
            <div>
            </div>
        </div>
        <div>
            <div class="test">
            </div>
        </div>
        <div>
            <div>
            </div>
        </div>
        <div>
            <div class="test">
            </div>
        </div>
        <div>
            <div>
            </div>
        </div>
    </div>
</div>

Tests:

querySelector
document.querySelector(".test")
getElementsByClassName
document.getElementsByClassName(".test")?.[0]

Run results for: querySelector vs. getElementsByClassName nested dom

Testing querySelector against getElementsByClassName in a larger DOM with multiple target nodes (only one is needed)

querySelector

getElementsByClassName