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: 2 years ago

getElementById

8K/s

getElementsByClassName

7K/s

getElementsByName

7K/s

getElementsByClassName[0]

3K/s

getElementsByName[0]

3K/s

View exact numbers

Test name	Executions per second
✓ getElementById	7,668 Ops/sec
getElementsByClassName	7,479 Ops/sec
getElementsByName	7,266 Ops/sec
getElementsByClassName[0]	2,672 Ops/sec
getElementsByName[0]	2,582 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]; }