querySelectorAll vs getElementsByTagName

JavaScript performance comparison

Revision 21 of this test case created by Sebastian Poreba

Preparation code

<div>
  <ul id="list" class="foo">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
  </ul>
</div>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
querySelectorAll
var nodes = document.querySelectorAll('ul')
pending…
getElementsByTagName
var nodes = document.getElementsByTagName('ul')
pending…
getElementsByClassName
var nodes = document.getElementsByClassName('foo')
pending…
getElementById
var nodes = document.getElementById('list')
pending…
querySelectorAll class name
var nodes = document.querySelectorAll('.foo')
pending…
querySelectorAll ID
var nodes = document.querySelectorAll('#list')
pending…
querySelectorAll - real usage
var nodes = document.querySelectorAll('ul');
for (var i = 0; i < nodes.length; ++i) {
 nodes[i].className = "foo";
}
pending…
getElementsByTagName - real usage
var nodes = document.getElementsByTagName('ul');
for (var i = 0; i < nodes.length; ++i) {
 nodes[i].className = "foo";
}
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

Sebastian Poreba commented :

getElementsByTagName does nothing if result is not used later. It creates live collection with elements gathered on demand, while querySelectorAll actually does crawling on call. It's not suprising it's slower.

Add a comment