Run results for: getElementById vs getElementsByClassName vs getElementsByName2

Run details:

User agent: Mozilla/5.0 (Android 12; Mobile; rv:126.0) Gecko/126.0 Firefox/126.0

Browser: Firefox Mobile 126

Operating system: Android

Device Platform: Mobile

Date tested: 5 months ago

Test name	Executions per second
getElementById	7667.8 Ops/sec
getElementsByClassName	7478.9 Ops/sec
getElementsByClassName[0]	2672.3 Ops/sec
getElementsByName	7266.0 Ops/sec
getElementsByName[0]	2581.5 Ops/sec

Script Preparation code:

let Zoo = document.createElement("div"); 

for (let i=0;i<1000;i++){
	let foo = document.createElement("div");                        
	foo.id= "foo";
	foo.classList.add("foo");
	foo.name= "foo";
	Zoo.appendChild(foo);     
}

Tests:

getElementById
for (let i=0;i<1000;i++){ let bar1 = document.getElementById("foo"); }
getElementsByClassName
for (let i=0;i<1000;i++){ let bar2 = document.getElementsByClassName("foo"); }
getElementsByClassName[0]
for (let i=0;i<1000;i++){ let bar3 = document.getElementsByClassName("foo")[100]; }
getElementsByName
for (let i=0;i<1000;i++){ let bar4 = document.getElementsByName("foo"); }
getElementsByName[0]
for (let i=0;i<1000;i++){ let bar5 = document.getElementsByName("foo")[100]; }

Run results for: getElementById vs getElementsByClassName vs getElementsByName2

getElementById

getElementsByClassName

getElementsByClassName[0]

getElementsByName

getElementsByName[0]