Run results for: get focusable element: querySelectorAll vs loop v2

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/600.8.9 (KHTML, like Gecko) Version/8.0.8 Safari/600.8.9

Browser: Safari 8

Operating system: Mac OS X 10.10.5

Device Platform: Desktop

Date tested: 10 months ago

Test name	Executions per second
for loop	0.0 Ops/sec
querySelectorAll	657568.8 Ops/sec

HTML Preparation code:

<div>
  <div class="container">
    <div id="target" class="container">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <div tabindex="0">Focusable</div>
      <div class="container">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
        <a href="#">Link 6</a>
        <a href="#">Link 7</a>
        
        <div class="container">
          <div tabindex="0">Focusable</div>
          <input type="text" />
        </div>
      </div>
    </div>
    <div class="container">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <div tabindex="0">Focusable</div>
      <div class="container">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
        <a href="#">Link 6</a>
        <a href="#">Link 7</a>
        
        <div class="container">
          <div tabindex="0">Focusable</div>
          <input type="text" />
          <input disabled="disabled" type="text" />
        </div>
      </div>
      <div class="container">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <div tabindex="0">Focusable</div>
      <div class="container">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
        <a href="#">Link 6</a>
        <a href="#">Link 7</a>
        
        <div class="container">
          <div tabindex="0">Focusable</div>
          <input type="text" />
        </div>
      </div>
        <div class="container">
      <button>1</button>
      <button>2</button>
      <button>3</button>
      <button>4</button>
      <button>5</button>
      <button>6</button>
      <div tabindex="0">Focusable</div>
      <div class="container">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
        <a href="#">Link 6</a>
        <a href="#">Link 7</a>
        
        <div class="container">
          <div tabindex="0">Focusable</div>
          <input type="text" />
        </div>
      </div>
    </div>
  </div>
</div>

Script Preparation code:

var target = document.getElementById('target');

function getCandidates(target) {
  var candidates = [];
  
  var children = target.children;
  
  for (var element of children) {
    if (element.tabIndex >= 0 && (element.disabled === undefined || element.disabled === false) && element.inert === false) {
      if (element.tagName === 'A' && element.getAttribute('href') === null) {
		continue;
      }

      candidates.push(element);
    }
    
    if (element.childElementCount) {
      candidates = candidates.concat(getCandidates(element));
    }
  }
  
  return candidates;
}

Tests:

for loop
getCandidates(target);
querySelectorAll
const candidates = Array.from(target.querySelectorAll( 'a[href], button:not(:disabled), input:not(:disabled), textarea:not(:disabled), select:not(:disabled), details, [tabindex]:not([tabindex="-1"])' )); candidates.filter((candidate) => candidate.inert === false);

Run results for: get focusable element: querySelectorAll vs loop v2

for loop

querySelectorAll