JSFiddle - React, Tailwind, and code Playground
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.children;
var length = childNodes.length,
tag,
className,
attr,
attrValue,
reg = /\s*(?:(\*|(?:(?:\*|[\w\-]+)\|)?[\w\-]+))?(?:\[\s*(?:((?:[\w\-]+\|)?[\w\-]+)\s*((?:~|\^|\$|\*|\|)?=)\s*)?((?:".*?(?:(?:[\\]{2}(?="))|[^\\])"|'.*?(?:(?:[\\]{2}(?='))|[^\\])'|[^"'].*?)?)\s*\])?(?:(\.|#)([\w\-]+))?(?:(:(?::)?)([\w\-]+)(?:\(\s*([^\s,]+)\s*\))?)?(?:(?:\s*(?=\s))?(?:(?:\s(?=,|>|\+|~))?([\s,>+~](?!$)))?)?/g,
cache = {},
selector = 'div[aaaa="tttt"].vasea',
arr;
console.time('childNodes');
for (var i = 0; i < count; i++) {
for (var j = 0, t; j < length; j++) {
arr = cache[selector] || (cache[selector] = reg.exec(selector));
t = childNodes[j];
if(t.nodeType == 3 && t.nodeName == arr[1] && t.className == arr[6] && t.getAttribute(arr[2]) == arr[4]){
t;
}
}
}
console.timeEnd('childNodes');
console.time('selector');
for (var i = 0; i < count; i++) {
for(var j = 0, arr = div.querySelectorAll('#main > div.vasea[aaaa=tttt]'), len = arr.length; j < len; j++){
arr[j]
}
}
console.timeEnd('selector');