Benchmark: Test DOM elements selector

Script Preparation code:

// Custom query selector
function queryAll(selector) {
  if (typeof selector !== 'string') return selector;
  
  // ID
  var id_sel = selector.match(/^#([\w-]*)$/);
  if (id_sel) {
    var elem = document.getElementById(id_sel[1]);
    return (elem ? [elem] : []);  // Always return an array
  }
  
  // CLASS
  var class_sel = !id_sel && selector.match(/^\.([\w-]+)$/);
  if (class_sel) {
    var elems = document.getElementsByClassName(class_sel[1]);
    return elems;
  }
  
  // TAG
  var tag_sel = !class_sel && selector.match(/^[\w-]+$/);
  if (tag_sel) {
    var elems = document.getElementsByTagName(selector);
    return elems;
  }
  
  // Fallback
  return document.querySelectorAll(selector);
}

// Prepare DOM elements
var elements = '';
for (var i=0, len=10000; i<len; i++){
  elements += '<div id="someid" class="someclass el'+i+'">'+i+'</div>';
}
document.body.innerHTML += elements;

Tests:

querySelectorAll:class
document.querySelectorAll('.someclass');
querySelectorAll:id
document.querySelectorAll('#someid');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll:class
querySelectorAll:id

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 124 on Android

View result in a separate tab

Test name	Executions per second
querySelectorAll:class	1490.9 Ops/sec
querySelectorAll:id	1356.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript benchmark test case on MeasureThat.net, which evaluates the performance of `document.querySelectorAll()` method for selecting DOM elements based on class and ID selectors.

**Tested Options**

Two options are compared in this benchmark:

1.  **Class Selector (`'.someclass'`)**

*   **Pros:** Fast and efficient way to select multiple elements that contain a specific class.
    *   **Cons:** May not be as precise as ID-based selection, especially if there are multiple elements with the same class name.

2.  **ID Selector (`#someid`**)

*   **Pros:** Precise and reliable way to select only one element based on its unique identifier.
    *   **Cons:** Can be slower than class selector for large numbers of elements, as it requires more DOM lookups.

**Library: `document.querySelectorAll()`**

This method is used to select all elements that match a given CSS selector. It returns a NodeList containing all matching elements. The implementation provided in the script preparation code is a custom version of this built-in method, which supports both class and ID selectors.

**Special JS Feature/ Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark.

**Benchmark Preparation Code**

The script preparation code generates 10,000 DOM elements with unique IDs and classes. It then appends these elements to the `body` of the HTML document using the `innerHTML` property.

**Other Alternatives**

While `document.querySelectorAll()` is a widely used method for selecting DOM elements, other alternatives exist:

1.  **`document.getElementsByClassName()`**: This method also selects multiple elements based on their class names but is generally slower and less flexible than `document.querySelectorAll()`.
2.  **`document.getElementById()`**: This method selects only one element based on its ID but can be unreliable if there are duplicate IDs or if the element is dynamically added to the DOM.
3.  **CSS Selectors (e.g., `.someclass > div`)**: While not explicitly tested in this benchmark, CSS selectors can also be used to select elements. However, they may require additional parsing and processing by the browser.

In summary, `document.querySelectorAll()` is a fast and efficient method for selecting multiple DOM elements based on class or ID selectors. The provided benchmark evaluates its performance under different scenarios, offering insights into its strengths and limitations.

Related benchmarks:

Test DOM elements selector (version: 0)

Comparing performance of: querySelectorAll:class vs querySelectorAll:id

Created: 9 years ago by: Guest

Jump to the latest result

querySelectorAll:class

querySelectorAll:id

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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