Selecting Elements by ID (v2)

Revision 2 of this benchmark created on May 26, 2023

Description

Preparation HTML

<div id="__next"><div class="font-sans antialiased min-h-full flex flex-col bg-gray-100"><div class="flex-auto "><div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 bg-white min-h-screen"><header><nav class="flex items-center justify-between flex-wrap py-2"><div class="flex items-center flex-shrink-0 mr-6"><a href="/" class="no-underline text-black"><span class="sr-only">jsPerf Home Page</span><span class="font-semibold text-2xl tracking-tight">jsPerf.app</span></a></div><div class="block lg:hidden"><button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white"><svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path></svg></button></div><div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto"><div class="text-sm lg:flex-grow"><a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-gray-400 hover:text-white mr-4"> </a></div><div><button class="flex items-center inline-block text-sm px-4 py-2 hover:fill-blue-500 hover:text-blue-500 lg:mt-0"><span>Sign In</span><svg aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true" fill="#000000" width="16" height="16" class="ml-2 fill-inherit"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></button></div><div><button href="#" class="flex items-center inline-block text-sm px-4 py-2 hover:text-blue-500 hover:bg-white mt-4 lg:mt-0"><span>About</span><svg data-accordion-icon="true" class="w-6 h-6 shrink-0 rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"></path></svg></button></div></div></nav><section id="about" class="p-5 visible border-solid border-2 border-gray-300"><p>jsPerf.app is an online JavaScript performance benchmark test runner &amp; jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern &amp; maintainable <a href="https://github.com/rd13/jsperf.app">codebase</a>.</p><p class="my-4">jsperf.com URLs are mirrored at the same path, e.g:</p><pre class="bg-gray-100 inline-block">https://jsperf.com/negative-modulo/2</pre><p class="my-4">Can be accessed at:</p><pre class="bg-gray-100 inline-block"><a href="/negative-modulo/2">https://jsperf.app/negative-modulo/2</a></pre></section></header><h1 class="font-semibold py-2">Create a test case</h1><form class="forms_editForm__P1tgl w-full"><fieldset><h3 class="bg-blue-500">Test case details</h3><div><label for="title">Title <span class="text-red-600">*</span></label><input type="text" id="title" name="title" required="" value=""/></div><div><label for="info" class="self-start">Description <br/><span class="text-gray-300 font-normal">(Markdown syntax is allowed)</span> </label><textarea name="info" id="info" rows="5" maxLength="16777215"></textarea></div></fieldset><fieldset><h3 class="bg-blue-500">Preparation Code</h3><div><label for="initHTML" class="self-start">Preparation HTML <br/><span class="text-gray-300 font-normal">(this will be inserted in the <code>&lt;body&gt;</code> of a valid HTML5 document in standards mode)<br/>(useful when testing DOM operations or including libraries)</span></label><code class="html w-full md:w-1/2 p-2 border" style="min-height:150px"></code></div><div><label for="setup" class="self-start">Setup JS</label><code class="javascript w-full md:w-1/2 p-2 border" style="min-height:150px"></code></div>

<div id="some-id-to-test">Hello World</div>


<div><label for="teardown" class="self-start">Teardown JS</label><code class="javascript w-full md:w-1/2 p-2 border" style="min-height:150px"></code></div></fieldset><fieldset><h3 class="bg-blue-500">Test cases</h3><fieldset name="testCase"><div><h2 class="mx-5 w-full md:w-1/4 text-black font-bold text-right">Test #<!-- -->1</h2></div><div><label for="testTitle">Title <span class="text-red-600">*</span></label><input type="text" name="testTitle" required="" value=""/></div><div><label for="async">Async</label><input type="checkbox" name="async"/></div><div><label for="code" class="self-start">Code <span class="text-red-600">*</span></label><code class="javascript w-full md:w-1/2 p-2 border" style="min-height:150px"></code></div></fieldset><fieldset name="testCase"><div><h2 class="mx-5 w-full md:w-1/4 text-black font-bold text-right">Test #<!-- -->2</h2></div><div><label for="testTitle">Title <span class="text-red-600">*</span></label><input type="text" name="testTitle" required="" value=""/></div><div><label for="async">Async</label><input type="checkbox" name="async"/></div><div><label for="code" class="self-start">Code <span class="text-red-600">*</span></label><code class="javascript w-full md:w-1/2 p-2 border" style="min-height:150px"></code></div></fieldset></fieldset><div class="flex my-5 items-center"><div class="flex-1"><button type="button" class="underline hover:no-underline">Add test</button></div><button type="submit" class="buttons_default__w7tZG">Save test case</button></div></form><footer class="Footer_footer___O5Nl"><nav class="container flex px-2 py-4"><div class="w-auto block flex-grow"><a class="block mt-4 lg:inline-block lg:mt-0 mr-4 no-underline" href="/">New Benchmark</a><a class="block mt-4 lg:inline-block lg:mt-0 mr-4 no-underline" href="https://github.com/rd13/jsperf.app/issues">Report Issue</a></div><div></div></nav></footer></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"A4Ne0jm2Xi-jwvtWqdQTo","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>

Test runner

const x = document.getElementById("some-id-to-test");

const x = document.querySelector("#some-id-to-test");

const x = document.querySelectorAll("#some-id-to-test")[0];

const x = document.querySelector("[id=some-id-to-test]");

Revisions

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

• Revision 1: published on May 26, 2023
• Revision 2: published on May 26, 2023
• Revision 3: published on May 26, 2023