Test case details

Preparation Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> var i, $p = $('p'); for (i = 0; i < 500; i++) $('<span></span>').attr("id", i).attr("class", i).attr("data-attribute", i).appendTo($p); </script> <div> <p> <span id="id" class="class" data-attribute="attribute"> Content </span> </p> </div>
var el;

Test cases

Test #1

document.querySelector("span.class");

Test #2

document.querySelector("span[data-attribute='attribute']");

Test #3

document.querySelector(".class[data-attribute='attribute']");

Test #4

document.querySelector("span.class[data-attribute='attribute']");

Test #5

document.querySelector("[data-attribute]");

Test #6

document.querySelector("span#id");

Test #7

document.getElementsByClassName("class")[0]

Test #8

el = document.getElementsByTagName("span")[0]; el && (el.getAttribute("data-attribute") == 'attribute');

Test #9

el = document.getElementsByTagName("span")[0]; el && el.matches("[data-attribute='attribute']");

Test #10

document.querySelector("#id");

Test #11

document.querySelector(".class");

Test #12

document.querySelector("[data-attribute='attribute']");

Test #13

document.querySelector("span");