Run results for: querySelector() vs getElementsByClassName()[0] vs getElementById() (with random dom tree)

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

Browser: Chrome 69

Operating system: Linux

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
querySelector	1520407.0 Ops/sec
getElementsByClassName	2273860.0 Ops/sec
getElementById()	3090537.0 Ops/sec

Script Preparation code:

function randomNumber(max) {
	return Math.floor(Math.random() * Math.floor(max))
}
function randomString(length) {
	const rand = Math.random().toString(36).slice(2)
	if (!length) return rand
	if (rand.length >= length) return rand.slice(0, length)
	return rand + randomString(length - rand.length)
}
function randomElement(className) {
	const e = document.createElement('div')
	if (typeof className === 'string') e.classList.add(className)
	return e
}
function produceRandomElements(count) {
	count = count || 1000
	const elements = []
	for (let i = 0; i < count; i++) {
		elements.push(randomElement(randomString(5)))
	}
	return elements
}
function nestRandomly(elements) {
	while (elements.length > 1) {
		const i = randomNumber(elements.length)
		const j = randomNumber(elements.length - 1)
		const e = elements[i]
		elements.splice(i, 1)

		const t = elements[j]
		elements[j].appendChild(e)
		if (t.children && t.children.length > 3) nestRandomly(Array.from(t.children))
	}
	return elements[0]
}
function produceTestTree(count) {
	const elements = produceRandomElements(count)
	const target = elements[randomNumber(elements.length)]
	target.classList.add('test')
	target.id = 'test'
	return nestRandomly(elements)
}
document.body.appendChild(produceTestTree())

Tests:

querySelector
document.querySelector(".test")
getElementsByClassName
document.getElementsByClassName("test")[0]
getElementById()
document.getElementById("test")

Run results for: querySelector() vs getElementsByClassName()[0] vs getElementById() (with random dom tree)

Testing query speed of a single element, in a random dom tree

querySelector

getElementsByClassName

getElementById()