children walk vs scope query selector

Benchmark created by Dima Voytenko on March 4, 2016

Preparation HTML

<div id="parent">
  <a link1></a>
  <a link2></a>
  <a link3></a>
  <a link4></a>
  <a link5></a>
  <a link6></a>
  <a link7></a>
  <a link8></a>
</div>

Setup

var parent = document.getElementById('parent');
    
    function childByAttr(parent, attr) {
      var child;
      for (child = parent.firstElementChild; child;
        child = child.nextElementSibling) {
        if (child.hasAttribute(attr)) {
          return child;
        }
      }
      return null;
    }

Test runner

var child = document.createElement('a');
child.setAttribute('link9', '');
parent.appendChild(child);
childByAttr(parent, 'link9');
parent.removeChild(child);

var child = document.createElement('a');
child.setAttribute('link9', '');
parent.appendChild(child);
parent.querySelector(':scope > [link9]')
parent.removeChild(child);

Revisions

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

• Revision 1: published by Dima Voytenko on March 4, 2016