JSFiddle - React, Tailwind, and code Playground

by finom

HTML

<div id="main">
    <div>Div</div>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <p>Paragraph</p>
    <div>Div</div>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <p>Paragraph</p>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <div>Div</div>
    <p>Paragraph</p>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <div>Div</div>
    <p>Paragraph</p>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <div>Div</div>
    <div>Div</div>
    <div>Div</div>
    <p>Paragraph</p>
    <div>Div</div>
    <p>Paragraph</p>
    <div>Div</div>
    <div>Div</div>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <div>Div</div>
    <p>Paragraph</p>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <ul>
        <li>ListItem</li>
        <li>ListItem
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul></li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <p>Paragraph</p>
    <div>Div</div>
    <div>Div</div>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <p>Paragraph</p>
    <div>Div</div>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <div>Div</div>
    <p>Paragraph</p>
  ...

JavaScript

var count = 10000;
var div = document.querySelector('#main');
var childNodes = div.childNodes;
var length = childNodes.length;
var result = [];
console.time('selector');
for (var i = 0; i < count; i++) {
    result = div.querySelectorAll('#main > div');
}
console.timeEnd('selector');

console.time('childNodes');
for (var i = 0; i < count; i++) {
    result = [];
    loop: for (var j = 0; j < length; j++) {
        while (childNodes[j].nodeType !== 1) {
            if (++j >= length) break loop;
        }
        
        if(childNodes[j].webkitMatchesSelector('div')){
            result.push(childNodes[j]);
        }
    }
}
console.timeEnd('childNodes');