Run results for: Children vs QuerySelectorALL

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Browser: Chrome 117

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
getElementById	1147945088.0 Ops/sec
children	1151957120.0 Ops/sec
getFieldsByQuerySelectorAll	1153660160.0 Ops/sec

HTML Preparation code:

<div id="address-full-form">
				<div class="form-group">
					<label for="shipp_address">Вулиця</label>
					<input type="text" class="form-control" id="shipp_address" name="shipp_address" value="Rua Portelas, 1">
				</div>
				<div class="form-group">
					<label for="shipp_city">Місто / Село</label>
					<input type="text" class="form-control" id="shipp_city" name="shipp_city" value="Porto Salvo">
				</div>
				<div class="form-group">
					<label for="shipp_postcode">Поштовий індекс</label>
					<input type="text" class="form-control" id="shipp_postcode" name="shipp_postcode" value="2740">
				</div>
				<div class="form-group">
					<label for="shipp_latitude">Latitude</label>
					<input type="text" class="form-control" id="shipp_latitude" name="shipp_latitude" value="38.7221347">
				</div>
				<div class="form-group">
					<label for="shipp_longitude">Longitude</label>
					<input type="text" class="form-control" id="shipp_longitude" name="shipp_longitude" value="-9.3084501">
				</div>
			</div>

Tests:

getElementById
function getFieldsById() { const ShAdrsField = document.getElementById('shipp_address'); const ShCityField = document.getElementById('shipp_city'); const ShPstCdField = document.getElementById('shipp_postcode'); const ShMapLtdField = document.getElementById('shipp_latitude'); const ShMapLngField = document.getElementById('shipp_longitude'); }
children
function getFieldsByChildren() { const addressForm = document.getElementById('address-full-form'); const ShAdrsField = addressForm.children[0].children[1]; const ShCityField = addressForm.children[1].children[1]; const ShPstCdField = addressForm.children[2].children[1]; const ShMapLtdField = addressForm.children[3].children[1]; const ShMapLngField = addressForm.children[4].children[1]; }
getFieldsByQuerySelectorAll
function getFieldsByQuerySelectorAll() { const addressForm = document.getElementById('address-full-form'); const [ShAdrsField, ShCityField, ShPstCdField, ShMapLtdField, ShMapLngField] = Array.from(addressForm.querySelectorAll('input')); }

Run results for: Children vs QuerySelectorALL

Children vs QuerySelectorALL

getElementById

children

getFieldsByQuerySelectorAll