Benchmark: get variable elements

HTML Preparation code:

<div id="element" class="element" data-trigger="">text</div>

Tests:

getElementById
const element = document.getElementById('element'); element.innerText = 'text';
getElementsByClassName
const element = document.getElementsByClassName('element')[0]; element.innerText = 'text';
querySelector (ID)
const element = document.querySelector('#element'); element.innerText = 'text';
querySelector (class)
const element = document.querySelector('.element'); element.innerText = 'text';
querySelector (attribute)
const element = document.querySelector('[data-trigger]'); element.innerText = 'text';
querySelectorAll (ID)
const element = document.querySelectorAll('#element')[0]; element.innerText = 'text';
querySelectorAll (class)
const element = document.querySelectorAll('.element')[0]; element.innerText = 'text';
querySelectorAll (attribute)
const element = document.querySelectorAll('[data-trigger]')[0]; element.innerText = 'text';

Rendered benchmark preparation results:

Previous results

Test case name	Result
getElementById
getElementsByClassName
querySelector (ID)
querySelector (class)
querySelector (attribute)
querySelectorAll (ID)
querySelectorAll (class)
querySelectorAll (attribute)

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Browser/OS: Chrome 94 on Mac OS X 10.15.7

Test name	Executions per second
getElementById	313771.5 Ops/sec
getElementsByClassName	269587.1 Ops/sec
querySelector (ID)	281883.8 Ops/sec
querySelector (class)	267624.4 Ops/sec
querySelector (attribute)	270733.4 Ops/sec
querySelectorAll (ID)	245001.9 Ops/sec
querySelectorAll (class)	227157.7 Ops/sec
querySelectorAll (attribute)	218114.6 Ops/sec

get variable elements (version: 0)