Get one element--complex path

Benchmark created by Ara Pehlivanian on

Description

Are native DOM methods faster than selector engines, even if looping and other steps are involved?

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="//yui.yahooapis.com/3.2.0pr2/build/simpleyui/simpleyui-min.js"></script>

<div>foo</div>
<div id="bar"><ul>
<li>bar</li>
<li class="foo bar">foo bar</li>
<li class="foo bar"><span class="baz">baz</span></li>
</ul></div>

Test runner

Ready to run.

Testing in
TestOps/sec
Native
// get "#bar ul li.foo.bar span.baz"
var bar, ul, li, span, i, j, k, found = [];

bar = document.getElementById("bar");
if (bar) {
 ul = bar.getElementsByTagName("ul");

 for (i = 0; ul[i]; i += 1) {
  li = ul[i].getElementsByTagName("li");
  for (j = 0; li[j]; j += 1) {
   if (li[j].className && li[j].className.indexOf("foo") !== -1 && li[j].className.indexOf("bar").indexOf !== -1) {
    span = li[j].getElementsByTagName("span");
    for (k = 0; span[k]; k += 1) {
     if (span[k].className && span[k].className.indexOf("baz") !== -1) {
      found.push(span[k]);
     }
    }
   }
  }
 }
}
ready
querySelector
var node = document.querySelector("#bar ul li.foo.bar span.baz");
ready
$()
var node = $("#bar ul li.foo.bar span.baz");
ready
Y.one()
var node = Y.one("#bar ul li.foo.bar span.baz");
ready
XPath
var node = document.evaluate("*[@id='bar']/ul/li[@class='foo' and @class='bar']/span[@class = 'baz']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
ready

Revisions

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

  • Revision 1: published by Ara Pehlivanian on