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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 Edg/122.0.2334.0

Browser: Chrome 122

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

children.forEach

215/s

querySelectorAll().forEach

195/s

children

183/s

querySelectorAll(:scope)

181/s

querySelectorAll

178/s

querySelectorAll(:scope).forEach

169/s

View exact numbers

Test name	Executions per second
✓ children.forEach	215 Ops/sec
querySelectorAll().forEach	195 Ops/sec
children	183 Ops/sec
querySelectorAll(:scope)	181 Ops/sec
querySelectorAll	178 Ops/sec
querySelectorAll(:scope).forEach	169 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); });