Benchmark: querySelectorAll vs getElementsByName vs getElementsByClassName

HTML Preparation code:

<div class="he" name="hed">
  <div class="ho" name="as">
      <div class="unique" name="unique" >test</div>
  		<div class="unique" name="unique" >test</div>
  </div>
  <div class="unique" name="unique" >test</div>
  <div class="unique" name="unique" >test</div>
</div>

Script Preparation code:

var doc = document;

Tests:

querySelectorAll/class
var test = doc.querySelectorAll('.unique');
querySelectorAll/name
var test = doc.querySelectorAll('[name="unique"]');
getElementsByName
var test = doc.getElementsByName('unique');
getElementsByClassName
var test = doc.getElementsByClassName('unique');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll/class
querySelectorAll/name
getElementsByName
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36

Browser/OS: Chrome 90 on Windows

View result in a separate tab

Test name	Executions per second
querySelectorAll/class	521600.8 Ops/sec
querySelectorAll/name	281547.8 Ops/sec
getElementsByName	2672466.8 Ops/sec
getElementsByClassName	2623820.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

**What is being tested?**

On the provided JSON, three DOM query methods are being compared: `querySelectorAll`, `getElementsByName`, and `getElementsByClassName`. These methods are used to select elements from an HTML document.

**Options being compared:**

* `querySelectorAll`: Returns a NodeList containing all child elements that match the specified CSS selector. It can also accept a string with attributes, like `[name="unique"]`.
* `getElementsByName`: Returns a collection of elements whose name attribute matches the specified value.
* `getElementsByClassName`: Returns a live HTMLCollection of elements whose class attribute contains the specified value.

**Pros and Cons:**

* **querySelectorAll**: Pros:
	+ Highly flexible, supporting CSS selectors and attributes.
	+ Can be used to select multiple elements at once.
	+ Generally faster than other methods for simple queries.
* Cons:
	+ May return more elements than needed, as it uses a DOM query approach.
	+ Can be slower for complex queries or large documents.
* **getElementsByName**: Pros:
	+ Fast and efficient for simple name-based queries.
	+ Less memory-intensive than `querySelectorAll`.
* Cons:
	+ Less flexible than `querySelectorAll`, only matching by name.
	+ May return duplicate elements if multiple elements have the same name attribute value.
* **getElementsByClassName**: Pros:
	+ Fast and efficient for class-based queries.
	+ Can be used to select multiple elements at once.
* Cons:
	+ Less flexible than `querySelectorAll`, only matching by class.
	+ May return duplicate elements if multiple elements have the same class.

**Library usage:**

None mentioned in this benchmark, but note that these methods are built-in DOM APIs and do not rely on external libraries.

**Special JS features or syntax:**

There is no explicit mention of any special JavaScript features or syntax being used in this benchmark. However, it's worth noting that the use of CSS selectors (`querySelectorAll`) requires modern browsers (e.g., Chrome 90), as older browsers may not support them.

**Other alternatives:**

If you're looking for alternative methods to achieve similar results:

* **jQuery**: A popular JavaScript library that provides a more flexible and efficient way to manipulate the DOM. However, it introduces an additional dependency.
* **Sizzle**: Another CSS selector engine that can be used as a drop-in replacement for `querySelectorAll` in older browsers.
* **Vanilla JavaScript alternatives**: You could use techniques like regular expressions or manual DOM traversal (e.g., iterating over elements) to achieve similar results. However, these approaches may be slower and less efficient than the built-in methods.

Keep in mind that the choice of method depends on your specific use case, performance requirements, and personal preference.

Related benchmarks:

querySelectorAll vs getElementsByName vs getElementsByClassName (version: 0)

querySelectorAll vs getElementsByName vs getElementsByClassName

Comparing performance of: querySelectorAll/class vs querySelectorAll/name vs getElementsByName vs getElementsByClassName

Created: 3 years ago by: Guest

Jump to the latest result

querySelectorAll/class

querySelectorAll/name

getElementsByName

getElementsByClassName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):