How beauty is querySelector() ?

3 min readNov 15, 2022

What is JavaScript querySelector?

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found it will returned as null. [source- MDN docs]

Note: The matching is done using depth-first pre-order traversal of the document’s nodes starting with the first element in the document’s markup and iterating through sequential nodes by order of the number of child nodes. [source- MDN docs]

document.querySelector(selectorsName)

Is querySelector better than getElementById & ClassName ?

querySelector is the newer feature of javascript.

querySelector gives you a static node list while getElementsByClassName gives you a node list.
getElementById is better than querySelector but querySelector is better supported than getElementsByClassName.

Which selector is fastest?

Among all three selectors, the ID selector is the fastest selector because an ID of any HTML element will be unique in web page and when a web page loaded, the browser will start searching for the element with a specified ID.

Lets take an example of querySelector()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Query Selector</title>
</head>

<body>

    <button class="btn" onclick="showMagic()">click me</button>
    <div class="box">
        <p>I love javascript more then cup of coffee</p>
    </div>


</body>
<script>
    function showMagic() {
        const test = document.querySelector('.box')
        test.style.color = 'red'
        test.previousElementSibling.style.color = 'green'
    }
</script>
</html>

What is querySelectorAll()

The querySelectorAll() method returns all elements that matches a CSS selector(s). The querySelectorAll() method returns a NodeList. The querySelectorAll() method throws a SYNTAX_ERR exception if the selector(s) is invalid.

Lets take an example of querySelectorAll()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Query Selector</title>
</head>

<body>

    <button class="btn" onclick="showMagic()">click me</button>
    <div class="box">
        <p>I love javascript more then cup of coffee</p>
        <div class="box">
            <p>I love javascript</p>
        </div>
    </div>
    <div class="box">
        <p>I love</p>
    </div>

</body>
<script>
    function showMagic() {
        const test = document.querySelectorAll('.box')
        test.forEach((item) => {
            console.log(item)
            item.style.color = "red";
        })

    }
</script>
</html>