xpath-vs-dom-vs-jquery

Benchmark created by Scott Sauyet on September 9, 2011

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div class="box">
    <h3>Some title</h3>
    <p class="buttons">
        <button onclick="myfunction(this)">Trigger</button>
    </p>
</div>

<script>
  var button, $button;
  
  $(document).ready(function() {
      $button = $("div.box button");
      button = $button[0];
  });
</script>

Test runner

var header = button.parentNode.parentNode.getElementsByTagName("h3")[0]; 

var heading = document.evaluate("../../h3", button, null,
XPathResult.ANY_TYPE, null); 

var heading = $button.parent().parent().find("h3");

Revisions

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

• Revision 1: published by Scott Sauyet on September 9, 2011
• Revision 2: published by Matt on September 12, 2011