querySelectorAll vs getElementsBy

Benchmark created by John on

Preparation HTML

<ul id="blablaUl">
            <li id="blablaLi">
              <span id="blablaLiSpan" i18n-content="blablaLiSpanContent">Bla bla bla more bla<br>Bla bla bla <a href="https://example.com/example1/" data-blabla="example1" target="_blank">bla-bla-bla</a>?<br>Bla <a href="https://example.com/example2/" data-blabla="example2" target="_blank">bla-bla</a>?</span>
            </li>
          </ul>

Test runner

Ready to run.

Testing in
TestOps/sec
document.getElementById + getElementsByTagName
console.log( document.getElementById( 'blablaLiSpan' ).getElementsByTagName( 'a' ) );
ready
document.querySelectorAll
console.log( document.querySelectorAll( '#blablaLiSpan a' ) );
ready
document.querySelectorAll 2
console.log( document.querySelectorAll( '#blablaLiSpan > a' ) );
ready
document.querySelectorAll data attribute
console.log( document.querySelectorAll( '[data-blabla]' ) );
ready

Revisions

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