Benchmark: Get elements by class: jQuery vs querySelectorAll vs getElementsByClassName 👻

Get elements by class: jQuery vs querySelectorAll vs getElementsByClassName 👻 (version: 0) Benchmark.js

Compare various methods of obtaining a group of elements identified by class name

Comparing performance of: `jQuery- vs querySelectorAll vs getElementsByClassName vs jQuery: mixed selector vs querySelectorAll: mixed selector`

Created: 7 years ago by: Registered User

Go to the latest result

HTML Preparation code:

<ul id="theList">
  <li class="odd">Item 1</li>    
  <li class="even">Item 2</li>    
  <li class="odd">Item 3</li>    
  <li class="even">Item 4</li>    
  <li class="odd">Item 5</li>    
  <li class="even">Item 6</li>    
  <li class="odd">Item 7</li>    
  <li class="even">Item 8</li>    
  <li class="odd">Item 9</li>    
  <li class="even">Item 10</li>    
  <li class="odd">Item 11</li>    
  <li class="even">Item 12</li>    
  <li class="odd">Item 13</li>    
  <li class="even">Item 14</li>    
  <li class="odd">Item 15</li>    
  <li class="even">Item 16</li>    
  <li class="odd">Item 17</li>    
  <li class="even">Item 18</li>    
  <li class="odd">Item 19</li>    
  <li class="even">Item 20</li>    
  <li class="odd">Item 21</li>    
  <li class="even">Item 22</li>    
  <li class="odd">Item 23</li>    
  <li class="even">Item 24</li>    
  <li class="odd">Item 25</li>    
  <li class="even">Item 26</li>    
  <li class="odd">Item 27</li>    
  <li class="even">Item 28</li>    
  <li class="odd">Item 29</li>    
  <li class="even">Item 30</li>    
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Tests:

jQuery-
var els = $('.even');
querySelectorAll
var els = document.querySelectorAll('.even');
getElementsByClassName
var els = document.getElementsByClassName('even');
jQuery: mixed selector
var els = $('li.even');
querySelectorAll: mixed selector
var els = document.querySelectorAll('li.even');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery-
querySelectorAll
getElementsByClassName
jQuery: mixed selector
querySelectorAll: mixed selector

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Windows

View result in a separate tab

getElementsByClassName

6.8M/s

jQuery-

1.4M/s

querySelectorAll

1.2M/s

querySelectorAll: mixed selector

909K/s

jQuery: mixed selector

628K/s

View exact numbers

Test name	Executions per second
✓ getElementsByClassName	6,786,428 Ops/sec
jQuery-	1,383,310 Ops/sec
querySelectorAll	1,227,436 Ops/sec
querySelectorAll: mixed selector	908,959 Ops/sec
jQuery: mixed selector	628,170 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is comparing three methods to get elements by class name in HTML:

1. `getElementsByClassName` ( native JavaScript method)
2. `querySelectorAll` (CSS selector API method)
3. `jQuery` (a popular JavaScript library)

**Methods Compared**

Here are the individual test cases:

1. **getElementsByClassName**: Tests the native JavaScript method to get elements by class name.
2. **querySelectorAll**: Tests the CSS selector API method to get elements by class name.
3. **jQuery-**: Tests the jQuery library's `$('.class')` method to get elements by class name (without specifying the element type).
4. **querySelectorAll: mixed selector**: Tests the CSS selector API method with a mixed selector (`li.even`) to get elements by class and tag name.
5. **jQuery: mixed selector**: Tests the jQuery library's `$('selector')` method with a mixed selector (`li.even`) to get elements by class and tag name.

**Pros and Cons of Each Method**

Here are some pros and cons of each method:

* **getElementsByClassName**
	+ Pros:
		- Native JavaScript method, no dependencies.
		- Can be used on older browsers that don't support CSS selectors.
	+ Cons:
		- Returns an HTMLCollection, which is not as efficient as an array or NodeList.
		- May not work well with complex class names or nested classes.
* **querySelectorAll**
	+ Pros:
		- More flexible than `getElementsByClassName`, supports CSS selectors.
		- Returns a NodeList, which is more efficient than an HTMLCollection.
	+ Cons:
		- Requires CSS support, may not work on older browsers.
		- Can be slower due to the need for parsing and compiling CSS selectors.
* **jQuery**
	+ Pros:
		- Very flexible and powerful selector engine.
		- Works well with complex class names and nested classes.
	+ Cons:
		- Adds an extra dependency (the jQuery library), which can slow down page load times.
		- May be slower than native JavaScript methods or CSS selectors.

**Library Used**

The `jQuery` library is used in the `jQuery-` and `jQuery: mixed selector` test cases. The `jQuery` library provides a convenient way to select elements by class name, but it also adds an extra dependency that can impact performance.

**Special JS Feature/ Syntax**

None of the methods mentioned require special JavaScript features or syntax beyond standard CSS selectors.

**Other Alternatives**

If you need to get elements by class name in JavaScript, some alternative methods include:

* `document.getElementsByClassName()` (similar to `getElementsByClassName`, but returns an HTMLCollection)
* `Array.prototype.filter()` with a callback function that checks the element's class names
* A custom solution using CSS selectors and the `querySelectorAll()` method

Keep in mind that each of these alternatives has its own trade-offs in terms of performance, flexibility, and browser support.