Run results for: Traverse Elements in DOM tree 2

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser: Chrome 107

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Manual traversal function	7330.3 Ops/sec
NodeIterator	1121.1 Ops/sec
TreeWalker	3404.5 Ops/sec

HTML Preparation code:

<div id="traversal-root">
	<div>
    	<div>
        	<div><div><div><div></div></div></div></div>
         	<div><div><div><div></div></div></div></div>
          	<div><div><div><section></section></div></div></div>
      	</div>
		<div>
        	<div><section><section><div></div></section></section></div>
         	<div><div><div><div></div></div></div></div>
          	<section><div><div><div></div></div></div></section>
      	</div>
    	<section>
        	<div><div><div><div></div></div></div></div>
         	<div><div><div><div></div></div></div></div>
          	<div><div><div><div></div></div></div></div>
      	</section>
    	<div>
        	<div><div><div><div></div></div></div></div>
         	<div><div><div><div></div></div></div></div>
          	<div><div><div><div></div></div></div></div>
      	</div>
	</div>
	<div>
    	<div>
        	<div><div><section><div></div></section></div></div>
         	<div><div><section><div></div></section></div></div>
          	<div><div><div><div></div></div></div></div>
      	</div>
		<div>
        	<div><div><div><div></div></div></div></div>
         	<div><div><div><div></div></div></div></div>
          	<div><div><div><section></section></div></div></div>
      	</div>
    	<div>
        	<div><div><div><div></div></div></div></div>
         	<div><div><div><div></div></div></div></div>
          	<div><div><div><div></div></div></div></div>
      	</div>
    	<section>
        	<div><div><div><div></div></div></div></div>
         	<div><div><div><div></div></div></div></div>
          	<div><div><div><div></div></div></div></div>
      	</section>
	</div>
	<section>
    	<section>
        	<section><section><section><section></section></section></section></section>
         	<div><div><div><section></section></div></div></div>
          	<div><section><div><div></div></div></section></div>
      	</section>
		<section>
        	<div><div><div><section></section></div></div></div>
         	<div><div><div><section></section></div></div></div>
          	<section><div><section><section></section></section></div></section>
      	</section>
    	<div>
        	<div><div><div><section></section></div></div></div>
         	<div><section><div><div></div></div></section></div>
          	<section><div><div><div></div></div></div></section>
      	</div>
    	<div>
        	<div><section><div><div></div></div></section></div>
         	<div><div><div><section></section></div></div></div>
          	<section><div><section><div></div></section></div></section>
      	</div>
	</section>
</div>

Script Preparation code:

window.symbol = Symbol('symbol');
window.traversalRoot = document.getElementById('traversal-root');
for (const el of traversalRoot.getElementsByTagName('section')) {
	Object.defineProperty(el, window.symbol, { value: {} });
}

window.isMatch = function isMatch(element) {
	return element[symbol] !== undefined;
}

window.traverse = function traverse(element, callback) {
	if (isMatch(element)) {
		callback(element);
	} else {
		for (const child of element.children) {
			traverse(child, callback);
		}
	}
};

window.traverseNodeIterator = function traverseNodeIterator(initialElement, callback) {
	const nodeIterator = document.createNodeIterator(
	    initialElement,
	    NodeFilter.SHOW_ELEMENT,
		(element) => {
			if (isMatch(element)) {
				callback(element);
				return NodeFilter.FILTER_REJECT;
			}
			return NodeFilter.FILTER_ACCEPT;
		}
	);

	while (nodeIterator.nextNode()) {}
};

window.traverseTreeWalker = function traverseTreeWalker(initialElement, callback) {
	const nodeIterator = document.createTreeWalker(
	    initialElement,
	    NodeFilter.SHOW_ELEMENT,
		(element) => {
			if (isMatch(element)) {
				callback(element);
				return NodeFilter.FILTER_REJECT;
			}
			return NodeFilter.FILTER_ACCEPT;
		}
	);

	while (nodeIterator.nextNode()) {}
};

Tests:

Manual traversal function
const results = []; traverse(traversalRoot, function callback(element) { for (const child of element.children) { traverse(child, callback); } results.push(element); })
NodeIterator
const results = []; traverseNodeIterator(traversalRoot, function callback(element) { for (const child of element.children) { traverseNodeIterator(child, callback); } results.push(element); })
TreeWalker
const results = []; traverseTreeWalker(traversalRoot, function callback(element) { for (const child of element.children) { traverseTreeWalker(child, callback); } results.push(element); })

Run results for: Traverse Elements in DOM tree 2

What's the fastest way to find all elements of a certain criteria within a DOM tree?

Manual traversal function

NodeIterator

TreeWalker