Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
getElementsByClassName vs querySelectorAll
(version: 0)
Comparing performance of:
getElementsByClassName vs querySelectorAll
Created:
9 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<style>.searchMe {border: 1px sold red;}</style> <table id="tableTest"></table>
Script Preparation code:
for(var i=0; i<10000; ++i) { var cell = tableTest.insertRow(-1).insertCell(-1); if(i%2==0) cell.classList.add('searchMe'); }
Tests:
getElementsByClassName
var found = tableTest.getElementsByClassName('searchMe'); tableTest.rows[0].cells[0].textContent = found.length;
querySelectorAll
var found = tableTest.querySelectorAll('.searchMe'); tableTest.rows[0].cells[0].textContent = found.length;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
getElementsByClassName
querySelectorAll
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll explain what's being tested in the provided benchmark. The test compares two methods to select HTML elements with a specific class name: `getElementsByClassName` and `querySelectorAll`. **getElementsByClassName** This method returns a live HTMLCollection of all elements whose class attribute contains the specified value. The collection is ordered by the ordinal position of the elements in the document. Pros: * Works well for older browsers that don't support CSS selectors. * Can be more efficient than `querySelectorAll` because it doesn't require a single CSS selector expression. Cons: * Returns an HTMLCollection, which is not as powerful as an array or NodeList and can lead to slower performance. * Can be slower for large documents with many elements matching the class name, since it iterates over all elements in the document. **querySelectorAll** This method returns a NodeList of all elements that match the specified CSS selector. The selector is evaluated from left to right, and the first argument (if present) determines the type of elements to return. Pros: * Returns an array-like object (NodeList), which is more efficient for modern browsers. * Can be faster than `getElementsByClassName` because it uses a more efficient algorithm to evaluate the CSS selector. Cons: * Requires a single CSS selector expression, which can make it harder to read and maintain. * May not work in older browsers that don't support CSS selectors. In this benchmark, the test creates 10,000 table rows with alternating classes, and then measures the time it takes to execute each method. The results show that `querySelectorAll` is generally faster than `getElementsByClassName`, especially for modern browsers like Firefox. Note: The use of `tableTest.rows[0].cells[0].textContent = found.length;` at the end of each benchmark definition is used to measure the execution time of each method, as it simply writes the length of the result array to a cell's text content.
Related benchmarks:
getElementByClassName vs querySelector 1
getElementById vs querySelector (class)
speed test query selector vs classname1
document.getElementsByClassname vs document.querySelector
getElementsByClassName vs querySelector, performance
Comments
Confirm delete:
Do you really want to delete benchmark?