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

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.84 Safari/537.36

Browser: Chrome 99

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
.getElementsByClassName()	8715.5 Ops/sec
.querySelectorAll()	647003.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()