Run results for: for vs foreach DOM elements

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6.1 Safari/605.1.15

Browser: Safari 17

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

forEach

474K/s

for

359K/s

View exact numbers

Test name	Executions per second
✓ forEach	473,955 Ops/sec
for	358,582 Ops/sec

HTML Preparation code:

<span id="democlass">
	<h1 class="ob-recIdx-0">Hello World</h1>
    <h1 class="ob-recIdx-1">Hello World</h1>
    <h1 class="ob-recIdx-2">Hello World</h1>
    <h1 class="ob-recIdx-3">Hello World</h1>
    <h1 class="ob-recIdx-4">Hello World</h1>
</span>

Tests:

for
var count = document.querySelectorAll('#democlass h1').length; for (var i = 0; i < count; i++) { //let currentIndex = String(i); var currentElement = document.querySelector('.ob-recIdx-' + i); currentElement.style.visibility = "hidden"; currentElement.classList.add('playerPlay'); }
forEach
var arr = document.querySelectorAll('#democlass h1'); arr.forEach(function(element){ element.style.visibility = "hidden"; element.classList.add('playerPlay'); });