Benchmark: JS selectors getters

HTML Preparation code:

<div id="idElement" class="classElement" role="dialog"></div>

Tests:

querySelector ID
var el = document.querySelector('#idElement'); var className = el.className;
querySelector CLASS
var el = document.querySelector('.classElement'); var className = el.className;
querySelector ATTR
var el = document.querySelector('[role=dialog]'); var className = el.className;
getElementById
var el = document.getElementById('idElement'); var className = el.className;
getElementsByClassName
var el = document.getElementsByClassName('classElement')[0]; var className = el.className;
getElementsByTagName
var el = document.getElementsByTagName('DIV')[0]; var className = el.className;

Rendered benchmark preparation results:

Previous results

ⓘ 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 (X11; Ubuntu; Linux x86_64; rv:91.0) Gecko/20100101 Firefox/91.0

Browser/OS: Firefox 91 on Ubuntu

JS selectors getters (version: 0)