Run details:
Mozilla/5.0 (Windows NT 10.0; rv:106.0) Gecko/20100101 Firefox/106.0
Firefox 106
Windows
Desktop
2 years ago
Test name Executions per second
TreeWalker 281445.7 Ops/sec
querySelectorAll 449552.9 Ops/sec
HTML Preparation code:
x
 
1
<!-- article out start -->
2
<article>
3
  <!-- article in start -->
4
  <h1>Lorem ipsum</h1>
5
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
6
  <!-- article in end -->
7
</article>
8
<!-- article out end -->
9
10
<!-- article out start -->
11
<article>
12
  <!-- article in start -->
13
  <h1>Lorem ipsum</h1>
14
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
15
  <!-- article in end -->
16
</article>
17
<!-- article out end -->
18
19
<!-- article out start -->
20
<article>
21
  <!-- article in start -->
22
  <h1>Lorem ipsum</h1>
23
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
24
  <!-- article in end -->
25
</article>
26
<!-- article out end -->
Tests:
  • TreeWalker

     
    const treeWalker = document.createTreeWalker(
      document.body,
      NodeFilter.SHOW_ELEMENT,
      
       () => node.nodeName == "H1" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
      ,
      false
    );
    for(let element; element; element = treeWalker.nextNode()) {
        element.className = 'new Class'
    }
  • querySelectorAll

     
    const list = document.body.querySelectorAll('h1');
    for(let i = 0, len = list.length ; i < len ; i++){
      list[i].className = 'new Class'
    }