Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelectorAll.forEach vs. Array.from(getElementsByClassName).forEach - remove(
(version: 0)
Comparing performance of:
querySelectorAll vs getElementsByClassName
Created:
4 years ago
by:
Registered User
Jump to the latest result
HTML Preparation code:
<div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div>
Tests:
querySelectorAll
document.querySelectorAll(".test").forEach(function (el) { el.remove() })
getElementsByClassName
Array.from(document.getElementsByClassName(".test")).forEach(function (el) { el.remove() })
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
querySelectorAll
getElementsByClassName
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 provide an explanation of the benchmark, its options, pros and cons, and other considerations. **Benchmark Definition** The benchmark compares two approaches to removing elements from a collection: 1. Using `querySelectorAll` with `forEach` 2. Using `getElementsByClassName` with `forEach` **Options** There are two options being compared: A) `querySelectorAll`: This method returns an HTMLCollection of all elements that match the specified selector (in this case, `.test`). The `forEach` method is then used to iterate over the collection and remove each element. B) `getElementsByClassName`: This method returns a NodeList of all elements whose class attribute matches the specified value (in this case, `.test`). The `forEach` method is then used to iterate over the NodeList and remove each element. **Pros and Cons** A) `querySelectorAll`: Pros: * Faster execution time, as it only retrieves the elements once * Less memory usage, as it doesn't create an array of elements Cons: * Requires the DOM to be parsed before using the method * May have performance issues if the collection is very large B) `getElementsByClassName`: Pros: * More reliable, as it doesn't rely on the DOM being parsed * Easier to use, as it returns a NodeList instead of an HTMLCollection Cons: * Slower execution time, as it needs to iterate over each element in the NodeList * More memory usage, as it creates an array-like object with all elements **Other Considerations** * The benchmark uses Chrome 91 on a Mac OS X 10.15.7 machine. * The `remove()` method is used to remove each element from the DOM, which can affect performance if not done correctly. * The benchmark doesn't account for other factors that could affect execution time, such as JavaScript engine optimizations or caching. **Library and Purpose** In this case, no specific library is used. However, some libraries like jQuery or Lodash might be used to simplify the comparison. **Special JS Feature or Syntax** There is no special JS feature or syntax being tested in this benchmark. The focus is on comparing two basic DOM manipulation methods. Other alternatives to these methods include: * Using `querySelector` and `then` (for promises) to retrieve elements * Using `Array.prototype.filter()` and `forEach()` to remove elements from an array-like object * Using a library like jQuery or Lodash to simplify DOM manipulation
Related benchmarks:
querySelectorAll foreach vs getElementsByClassName [].forEach.call()
querySelectorAll foreach vs getElementsByClassName [].forEach.call() 2
querySelectorAll.forEach vs. Array.from(getElementsByClassName).forEach
Array.prototype.forEach.call vs. Array.from(getElementsByClassName).forEach - remove(
Comments
Confirm delete:
Do you really want to delete benchmark?