Benchmark: getElementById vs querySelector vs getElementsByClassName

HTML Preparation code:

<div id="testdiv06">
  <div id="unique06" class="unique" name="unique" data-unique="1">test</div>
</div>
<div id="testdiv05">
  <div id="unique05" class="unique" name="unique" data-unique="1">test</div>
</div>
<div id="testdiv04">
  <div id="unique04" class="unique" name="unique" data-unique="1">test</div>
</div>
<div id="testdiv03">
  <div id="unique03" class="unique" name="unique" data-unique="1">test</div>
</div>
<div id="testdiv02">
  <div id="unique02" class="unique" name="unique" data-unique="1">test</div>
</div>
<div id="testdiv01">
  <div id="unique01" class="unique" name="unique" data-unique="1">test</div>
</div>
<div id="testdiv">
  <div id="unique" class="unique" name="unique" data-unique="1">test</div>
</div>

Script Preparation code:

var i, imax;
var doc = document;

Tests:

getElementById
var test = doc.getElementById('testdiv').childNodes[0].innerHTML;
getElementsByTagName
var formelem = doc.getElementById('testdiv').getElementsByTagName('div')[0].innerHTML;
querySelector
var test = doc.getElementById('testdiv').querySelector('.unique').innerHTML;
getElementsByClassName
var test = doc.getElementById('testdiv').getElementsByClassName('unique')[0].innerHTML;
getElementsByName
var test = doc.getElementsByName('unique')[0].innerHTML;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
getElementsByTagName
querySelector
getElementsByClassName
getElementsByName

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 70 on Windows

View result in a separate tab

Test name	Executions per second
getElementById	2715493.2 Ops/sec
getElementsByTagName	1150559.8 Ops/sec
querySelector	1426911.9 Ops/sec
getElementsByClassName	1159674.9 Ops/sec
getElementsByName	1321494.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a benchmark test for comparing the performance of different methods to retrieve a single DOM element in JavaScript.

**Methods being compared:**

1. `getElementById`
2. `querySelector`
3. `getElementsByClassName`
4. `getElementsByTagName` (which is not actually used, as it's not getting a single element but an array of elements)

**Options and their pros/cons:**

1. `getElementById`:
	* Pros: Simple, widely supported, and fast.
	* Cons: Returns only the first matching element, and it can be slow if there are many elements with the same ID.
2. `querySelector`:
	* Pros: More flexible than `getElementById`, allows for more complex selectors.
	* Cons: May have slower performance due to the complexity of the selector, and not all browsers support it.
3. `getElementsByClassName`:
	* Pros: Allows for selecting elements based on class names, can be useful in some scenarios.
	* Cons: Returns an array of elements with the specified class name, which can slow down if many elements match.
4. `getElementsByTagName` (not actually used):
	* Pros: None (it's not being used).
	* Cons: Slow and inefficient for this specific use case.

**Libraries and their purposes:**

1. None mentioned in the provided JSON, but some of these methods may rely on libraries like jQuery.

**Special JS features or syntax:**

None mentioned in the provided JSON, as none of the methods being compared require special JavaScript features or syntax beyond standard DOM manipulation.

**Other alternatives:**

If you're looking for alternative methods to retrieve a single DOM element, you might consider:

* `document.querySelector` (same as `querySelector`, but with a different API)
* `elementFromPoint` (a method that returns the nearest ancestor element from a given point on the page)
* Using CSS selectors to select elements directly

Keep in mind that these alternatives may have different trade-offs in terms of performance, flexibility, and browser support.

Related benchmarks:

getElementById vs querySelector vs getElementsByClassName (version: 0)

Test performance of different ways of get just one particular DOM element

Comparing performance of: getElementById vs getElementsByTagName vs querySelector vs getElementsByClassName vs getElementsByName

Created: 6 years ago by: Guest

Jump to the latest result

getElementById

getElementsByTagName

querySelector

getElementsByClassName

getElementsByName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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