MeasureThat.net

Run results for: querySelector vs getElementById vs getElementsByClassName vs getElementsByTagName 2

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:92.0) Gecko/20100101 Firefox/92.0
Firefox 92
Mac OS X 10.15
Desktop
3 years ago
Test name Executions per second
getElementById 3573833.5 Ops/sec
querySelector (id) 1314474.8 Ops/sec
getElementsByClassName 3909238.0 Ops/sec
querySelector (class) 1182266.1 Ops/sec
getElementsByTagName 3962080.0 Ops/sec
querySelector (tag) 1263613.8 Ops/sec
HTML Preparation code:
AخA
 
1
    <div class="test1">
2
        <div class="test1">
3
        <div class="test1"></div>
4
        <div class="test1"></div>
5
        <div class="test1">
6
            <div class="test1">
7
                <div class="test1"></div>
8
            </div>
9
        </div>
10
        <div class="test1"></div>
11
        <div class="test1"></div>
12
        </div>
13
        <div class="test1">
14
        <div class="test1"></div>
15
        <div class="test1">
16
            <div class="test1">
17
                <div class="test1"></div>
18
            </div>
19
        </div>
20
        <div class="test1">
21
            <div class="test1">
22
                <div class="test1"></div>
23
            </div>
24
        </div>
25
        <div class="test1"></div>
26
        </div>
27
        <div class="test1"></div>
28
        <div class="test1">
29
        <div class="test1"></div>
30
        <div class="test1">
31
            <div class="test1">
32
                <div class="test1"></div>
33
            </div>
34
            <div class="test1"></div>
35
        </div>
36
        <div class="test1"></div>
37
        <div class="test1"></div>
38
        <div class="test1"></div>
39
        </div>
40
        <div class="test1"></div>
41
        <div class="test1">
42
        <div class="test1">
43
            <div class="test1"></div>
44
            <div class="test1">
45
                <div class="test1">
46
                    <div class="test1">
47
                    <article class="test" id="test"></article>
48
                    </div>
49
                    <div class="test1">
50
                    <div class="test1"></div>
51
                    </div>
52
                    <div class="test1"></div>
53
                </div>
54
                <div class="test1"></div>
55
            </div>
56
        </div>
57
        <div class="test1"></div>
58
        <div class="test1"></div>
59
        </div>
60
        <div class="test1">
61
        <div class="test1"></div>
62
        <div class="test1">
63
            <div class="test1"></div>
64
            <div class="test1"></div>
65
        </div>
66
        <div class="test1"></div>
67
        <div class="test1"></div>
68
        <div class="test1"></div>
69
        </div>
70
    </div>
Tests:

  • getElementById

     
    document.getElementById("test");

  • querySelector (id)

     
    document.querySelector("#test")

  • getElementsByClassName

     
    document.getElementsByClassName("test")

  • querySelector (class)

     
    document.querySelector(".test")

  • getElementsByTagName

     
    document.getElementsByTagName("article")

  • querySelector (tag)

     
    document.querySelector("article")