Document Methods Test (v3)

Revision 3 of this benchmark created on

Description

Is querySelector faster than getElementById when called from a specific context?

Preparation HTML

<div id="app">
    <main>
        <h1>Welcome</h1>
        <div id="content">
            <h3>Current Calendars</h3>
            <ul>
                <li>
                    <span>Default</span>
                </li>
                <li>
                    <span>NASCAR Calendar</span>
                    —
                    <a id="update-cal" href="/path/to/update/url">Update</a>
                    ·
                    <a id="delete-cal" href="#modal" data-calendar="1" data-title="NASCAR Calendar">Delete</a>
                </li>
                <li>
                    <span>School Calendar 2025</span>
                    —
                    <a id="update-cal" href="/path/to/update/url">Update</a>
                    ·
                    <a id="delete-cal" href="#modal" data-calendar="43" data-title="School Calendar 2025">Delete</a>
                </li>
                <li>
                    <span>Holidays</span>
                    —
                    <a id="update-cal" href="/path/to/update/url">Update</a>
                    ·
                    <a id="delete-cal" href="#modal" data-calendar="2" data-title="Holidays">Delete</a>
                </li>
            </ul>
            <hr>
            <button type="button"
                onclick="window.open( '/path/to/create/calendar', '_self' )">Create new
                calendar</button>
        </div>
    </main>
</div>
<dialog id="modal" data-calendar="1" data-redirect="path/to/delete/calendar/url" open="">
    <p>Are you sure you want to delete <span id="cal-title">NASCAR Calendar</span>?</p>
    <p>
        <button type="button"
            onclick="window.open( this.parentNode.parentNode.dataset.redirect, '_self' )">Yes</button>
        ·
        <button type="button" value="cancel" onclick="this.parentNode.parentNode.close()">No</button>
    </p>
</dialog>

Test runner

Ready to run.

Testing in
TestOps/sec
Query Selector
const dialog = document.getElementById( 'modal' );
const title  = dialog.querySelector( '#cal-title' );
ready
Get by ID
const dialog = document.getElementById( 'modal' );
const title  = document.getElementById( 'cal-title' );
ready

Revisions

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