small-set-element-finder

Benchmark created on March 3, 2016

Preparation HTML

<div id="parent">
  <div test></div>
  <div test></div>
  <div foo></div>
</div>

Setup

/**
     * Finds the first child element that satisfies the callback.
     * @param {!Element} parent
     * @param {function(!Element):boolean} callback
     * @return {?Element}
     */
    function childElement(parent, callback) {
      for (let child = parent.firstElementChild; child;
          child = child.nextElementSibling) {
        if (callback(child)) {
          return child;
        }
      }
      return null;
    }
    
    
    /**
     * Finds the first child element that has the specified attribute, optionally
     * with a value.
     * @param {!Element} parent
     * @param {string} attr
     * @param {string=} opt_value
     * @return {?Element}
     */
    function childElementByAttr(parent, attr, opt_value) {
      return childElement(parent, el => {
        if (!el.hasAttribute(attr)) {
          return false;
        }
        if (opt_value !== undefined && el.getAttribute(attr) != opt_value) {
          return false;
        }
        return true;
      });
    }
    
    var parent = document.getElementById('parent');

Test runner

childElementByAttr(parent, 'foo')

try {
parent.querySelector(':scope > [foo]')
} catch (e) {
}

Revisions

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

• Revision 1: published on March 3, 2016