Getting a list of elements with querySelectorAll vs getElementsByClassName data attr vs class name (version: 0)

This benchmark compares the performance of different methods for selecting elements in JavaScript: querySelectorAll and getElementsByClassName.

Comparing performance of: document.querySelectorAll("[data-js='component-1']") vs document.querySelectorAll("div[data-js='component-1']") vs document.querySelectorAll('.component-1') vs document.querySelectorAll('div.component-1') vs document.querySelectorAll("div.component-1[data-js='component-1']") vs document.getElementsByClassName('component-1')

Created: one year ago by: Guest
Jump to the latest result
HTML Preparation code:
Tests:

  • document.querySelectorAll("[data-js='component-1']")

  • document.querySelectorAll("div[data-js='component-1']")

  • document.querySelectorAll('.component-1')

  • document.querySelectorAll('div.component-1')

  • document.querySelectorAll("div.component-1[data-js='component-1']")

  • document.getElementsByClassName('component-1')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results
  • Test case name Result
    document.querySelectorAll("[data-js='component-1']")
    document.querySelectorAll("div[data-js='component-1']")
    document.querySelectorAll('.component-1')
    document.querySelectorAll('div.component-1')
    document.querySelectorAll("div.component-1[data-js='component-1']")
    document.getElementsByClassName('component-1')

    Fastest: N/A

    Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!