querySelector vs getElement(s)ByWhatever vs .firstElementChild (v4)

Revision 4 of this benchmark created on

Preparation HTML

<p id="id0" class="class">some text 0</p>
<p id="id1" class="class">some text 1</p>
<p id="id2" class="class">some text 2</p>
<p id="id3" class="class">some text 3</p>
<p id="id4" class="class">some text 4</p>
<p id="id5" class="class">some text 5</p>
<p id="id6" class="class">some text 6</p>
<p id="id7" class="class">some text 7</p>
<p id="id8" class="class">some text 8</p>
<p id="id9" class="class">some text 9</p>

Test runner

Ready to run.

Testing in
TestOps/sec
querySelectorAll
const elements = document.querySelectorAll(".class");
ready
getElementsByClassName
const elements = document.getElementsByClassName("class");
ready
getElementsByTagName
const elements = document.getElementsByTagName("p");
ready
getElementById
let element;
for (i = 0; i < 10; i++) 	 
   element = document.getElementById("id" + i);
ready
firstElementChild/nextElementSibling
let element = document.getElementById("id0");
for (i = 0; i < 9; i++) 	 
   element = element.nextElementSibling;
ready

Revisions

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