Run results for: get variable elements

Run details:

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: Chrome 94

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 3 years ago

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

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';