querySelectorAll vs Traversal (v3)

Revision 3 of this benchmark created on September 9, 2011

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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
 <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

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);
  }
}

var list = document.getElementById('scroller').querySelectorAll('div.photo');

var list = document.querySelectorAll('#scroller div.photo');

var list = document.getElementsByClassName('photo');

var list = document.querySelectorAll('.photo');

var list = $('.photo');

Revisions

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

• Revision 1: published on August 15, 2011
• Revision 3: published on September 9, 2011
• Revision 5: published on May 3, 2012