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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 YaBrowser/25.8.0.0 Safari/537.36

Browser: Yandex Browser 25

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 6 months ago

Test name	Executions per second
children	3197.8 Ops/sec
querySelectorAll	3124.2 Ops/sec
querySelectorAll(:scope)	2999.8 Ops/sec
children.forEach	3142.8 Ops/sec
querySelectorAll().forEach	3155.2 Ops/sec
querySelectorAll(:scope).forEach	3046.2 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); });

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.

children

querySelectorAll

querySelectorAll(:scope)

children.forEach

querySelectorAll().forEach

querySelectorAll(:scope).forEach