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

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser: Chrome 120

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

querySelectorAll

320K/s

for loop

206K/s

View exact numbers

Test name	Executions per second
✓ querySelectorAll	320,494 Ops/sec
for loop	205,650 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);