querySelectorAll (IE<8 shimed) vs Traversal (IE<8 shimed) (v5)

Revision 5 of this benchmark created on May 3, 2012

Preparation HTML

<!--[if lt IE 8]><script src="https://raw.github.com/termi/ES5-DOM-SHIM/master/__COMPILE/a.ielt8.js"></script><![endif]-->
<!--[if IE 8]><script src="https://raw.github.com/termi/ES5-DOM-SHIM/master/__COMPILE/a.ie8.js"></script><![endif]-->
<script src="https://raw.github.com/termi/ES5-DOM-SHIM/master/__COMPILE/a.js"></script>

<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 list = [];
var child = document.getElementById('scroller').firstChild;
while(child !== null)
{
  if (child.className === 'photo')
    list.push(child);
  child = child.nextSibling;
}

var list,
    scroller = document.getElementById('scroller');
if(scroller.querySelectorAll)list = scroller.querySelectorAll('div.photo');
else list = document.querySelectorAll.call(scroller, '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