Run results for: getElementById vs getElementsByClassName vs getElementsByName2

Run details:

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

Browser: Chrome 120

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

getElementById

8K/s

getElementsByName

8K/s

getElementsByClassName

8K/s

getElementsByName[0]

5K/s

getElementsByClassName[0]

5K/s

View exact numbers

Test name	Executions per second
✓ getElementById	8,359 Ops/sec
getElementsByName	7,980 Ops/sec
getElementsByClassName	7,541 Ops/sec
getElementsByName[0]	4,763 Ops/sec
getElementsByClassName[0]	4,715 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]; }