Run results for: element.children vs element.querySelectorAll vs element.querySelectorAll(:scope)

Really basic test comparing accessing children via parentElement.children vs via querySelectorAll vs scoped querySelectorAll. Not a great test for the use case, but people who are less lazy than me can fork it and make it do thing good.

Run details:

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Mobile Safari/537.36 EdgA/122.0.0.0

Browser: Chrome Mobile 122

Operating system: Android

Device Platform: Mobile

Date tested: 2 years ago

children.forEach

219/s

querySelectorAll().forEach

195/s

querySelectorAll(:scope).forEach

194/s

children

181/s

querySelectorAll

176/s

querySelectorAll(:scope)

176/s

View exact numbers

Test name	Executions per second
✓ children.forEach	219 Ops/sec
querySelectorAll().forEach	195 Ops/sec
querySelectorAll(:scope).forEach	194 Ops/sec
children	181 Ops/sec
querySelectorAll	176 Ops/sec
querySelectorAll(:scope)	176 Ops/sec

HTML Preparation code:

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
</div>
<div class="fakeContainer">
	<div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
    <div class="item">Item 2</div>
</div>

Tests:

children
const container = document.querySelector('.container'); for (const item of container.children) { //do thing item.style.display = (Math.random() > 0.5) ? "none" : "flex"; item.innerText = (Math.random() * Math.random()).toFixed(6); }
querySelectorAll
const container = document.querySelector('.container'); const items = container.querySelectorAll('.item'); // calling on container still runs through the entire document...I think? for (const item of items) { //do thing item.style.display = (Math.random() > 0.5) ? "none" : "flex"; item.innerText = (Math.random() * Math.random()).toFixed(6); }
querySelectorAll(:scope)
const container = document.querySelector('.container'); const items = container.querySelectorAll(':scope .item'); for (const item of items) { //do thing item.style.display = (Math.random() > 0.5) ? "none" : "flex"; item.innerText = (Math.random() * Math.random()).toFixed(6); }
children.forEach
const container = document.querySelector('.container'); [...container.children].forEach(( item ) => { //do thing item.style.display = (Math.random() > 0.5) ? "none" : "flex"; item.innerText = (Math.random() * Math.random()).toFixed(6); });
querySelectorAll().forEach
const container = document.querySelector('.container'); const items = container.querySelectorAll('.item'); items.forEach((item) => { //do thing item.style.display = (Math.random() > 0.5) ? "none" : "flex"; item.innerText = (Math.random() * Math.random()).toFixed(6); });
querySelectorAll(:scope).forEach
const container = document.querySelector('.container'); const items = container.querySelectorAll(':scope .item'); items.forEach((item) => { //do things item.style.display = (Math.random() > 0.5) ? "none" : "flex"; item.innerText = (Math.random() * Math.random()).toFixed(6); });