<div class="test">Test</div>
var test = document.getElementsByClassName('test');
test.innerHTML;
var test = document.querySelector('.test');
test.innerHTML;
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Query by class | |
QuerySelector |
Test name | Executions per second |
---|---|
Query by class | 2419900.5 Ops/sec |
QuerySelector | 2629698.8 Ops/sec |
Let's dive into the benchmark definition and its implications.
What is being tested?
The benchmark compares two different methods for retrieving HTML elements based on their class name:
document.getElementsByClassName('test')
document.querySelector('.test')
Both approaches are used to select an HTML element with a class name of "test".
Options compared:
getElementsByClassName
(implemented in the browser's DOM API)querySelector
(also implemented in the browser's DOM API)Pros and Cons:
.test
.Other considerations:
getElementsByClassName
and querySelector
are widely supported across modern browsers. However, older browsers may not support them, or may have different implementations.querySelector
is faster than getElementsByClassName
for selecting a single element in this specific test case.Libraries:
None mentioned in the provided data.
Special JS feature or syntax:
None mentioned in the provided data.
Alternatives:
Other alternatives for retrieving HTML elements based on their class name include:
document.getElementById('id')
)However, these alternatives are not being compared in this specific benchmark.