querySelectorAll vs Traversal

Benchmark created on

Preparation HTML

<div id="scroller">

<div class="photo">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="" />
</div>

<div class="photo">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="" />
</div>

<div class="photo">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="" />
</div>

<div class="photo">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="" />
</div>

<div class="photo">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="" />
</div>

<div class="photo">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="" />
</div>

<div class="photo">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="" />
</div>

<div class="photo">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="" />
</div>

<div class="photo">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="" />
</div>

<div class="photo">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="" />
</div>

<div class="photo">
        <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" alt="" />
</div>

</div>
<script>
  if (Element) {
        Element.prototype.hasClassName = function (class_name) {
                return (this.className.length > 0 && (this.className == class_name ||
                        new RegExp("(^|\\s)" + class_name + "(\\s|$)").test(this.className)));
        }
        Element.prototype.addClassName = function (class_name) {
                if (!this.hasClassName(class_name))
                        this.className += (this.className ? ' ' : '') + class_name;
                return this;
        }
        Element.prototype.removeClassName = function (class_name) {
                this.className = this.className.replace(
                        new RegExp("(^|\\s+)" + class_name + "(\\s+|$)"), ' ');
                return this;
        }
  }
  
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Traversing
var element = document.getElementById('scroller');
var list = [];
for (var i in element.childNodes) {
        child = document.getElementById('scroller').childNodes[i];
        if (child.hasClassName && child.hasClassName('photo')) {
                list.push(child);
        }
}
 
ready
querySelectorAll
var list = document.getElementById('scroller').querySelectorAll('div.photo');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.