Run results for: .getElementsByClassName() vs. .querySelectorAll()

Run details:

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

Browser: Chrome 102

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
.getElementsByClassName()	29302.4 Ops/sec
.querySelectorAll()	1174844.1 Ops/sec

HTML Preparation code:

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

Tests:

.getElementsByClassName()
Array.from(document.getElementsByClassName("foo")).forEach(item => {if(item.textContent === "test"){console.log("match")}});
.querySelectorAll()
document.querySelectorAll("foo").forEach(item => {if(item.textContent === "test"){console.log("match")}});

Run results for: .getElementsByClassName() vs. .querySelectorAll()

Show the performance impact of a live node list (.getElementsByClassName()) vs. a static node list (.querySelectorAll()).

.getElementsByClassName()

.querySelectorAll()