querySelector() VS getElementById()

Benchmark created on

Description

Using various methods to select the descendants of a parent element.

Preparation HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="parent">
    <div id="children-a"></div>
    <div id="children-b"></div>
    <div id="children-c"></div>
</div>

</body>
</html>

Test runner

Ready to run.

Testing in
TestOps/sec
1
const parent = document.getElementById("parent");
const childrenA = parent.querySelector("#children-a");
const childrenB = parent.querySelector("#children-b");
const childrenC = parent.querySelector("#children-c");
ready
2
const parent = document.querySelector("#parent");
const childrenA = parent.querySelector("#children-a");
const childrenB = parent.querySelector("#children-b");
const childrenC = parent.querySelector("#children-c");
ready
3
const childrenA = document.querySelector("#parent #children-a");
const childrenB = document.querySelector("#parent #children-b");
const childrenC = document.querySelector("#parent #children-c");
ready
4
const childrenA = document.getElementById("children-a");
const childrenB = document.getElementById("children-b");
const childrenC = document.getElementById("children-c");
ready
5
const childrenA = document.querySelector("#children-a");
const childrenB = document.querySelector("#children-b");
const childrenC = document.querySelector("#children-c");
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.