How To Use HTML DOM QuerySelector Method In JavaScript

Posted By Bajarangi soft , Posted On 27-09-2020

In Java script we can get the first element in the document with class="example" so for that we can change its text color or background color today we discussing about how to use query selector method in java script

How To Use HTML DOM QuerySelector Method In JavaScript

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

Note: The querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method instead.

If the selector matches an ID in document that is used several times (Note that an "id" should be unique within a page and should not be used more than once), it returns the first matching element.

Syntax and Usage

document.querySelector(CSS selectors)

Parameter Values

CSS selectors   String Required. Specifies one or more CSS selectors to match the element. 
                These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc.
                For multiple selectors, separate each selector with a comma. The returned element depends on which element that 
                is first found in the document (See "More Examples").

Return Value: A NodeList object, representing the first element that matches the specified CSS selector(s).
If no matches are found, null is returned. Throws a SYNTAX_ERR exception if the specified selector(s) is invalid.

Example(1)

        <h2 class="example">A heading with class="example"</h2>
        <p class="example">A paragraph with class="example".</p>
        <button class="btn btn-primary"  onclick="burlywood()">Click it</button><br><br>
       
<script>
    function burlywood() {
        document.querySelector(".example").style.backgroundColor = "burlywood";
    }
</script>

In above example when i click the button it will add a background color to the first element in the document with class="example".

Example(2)

        <h2 class="example">A heading with class="example"</h2>
        <p class="example">A paragraph with class="example".</p>

        <button class="btn btn-primary"  onclick="darkseagreen()">Click it</button><br><br>
<script>
    function darkseagreen() {
        document.querySelector("p").style.backgroundColor = "darkseagreen";
    }
</script>

In above example when i click the button it will add a background color to the first p element in the document.

Example(3)

<h2 id="demo">This is a p element with id="demo".</h2>

<button class="btn btn-primary" onclick="change_text()">Click it</button><br><br>
<script>
    function change_text() {
        document.querySelector("#demo").innerHTML = "Hello World!Welcome to Bajarangisoft";
    }
</script>

In above example when i click the button it will change the text of the h2 element.

Example(4)

<a href="https://blog.bajarangisoft.com/blogs">Bajarangisoft</a>
<a href="http://www.google.com" target="_blank">google</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia</a>
<button class="btn btn-primary" onclick="border()">Click it</button>

<script>
    function border() {
        document.querySelector("a[target]").style.border = "10px solid red";
    }
</script>

In above example when i click the button it will add a red border to the first link that has a target attribute.

Example(5)

<style>
    div {
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>

<div>
    <h3>H3 element</h3>
    <p>I am a p element, my parent is a div element.</p>
</div>
<div>
    <h3>H3 element</h3>
    <p>I am a p element, my parent is also a div element.</p>
</div>

<button class="btn btn-primary" onclick="change_bg()">Try it</button>

<script>
    function change_bg() {
        var x = document.querySelector("div > p");
        x.style.backgroundColor = "red";
    }
</script>

In above example when i click the button it will change the background color of the first p element in the document where the parent is a div element.

Complete code for HTML DOM QuerySelector Method In JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM QuerySelector Method In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1 {
        color: red;
    }
</style>
<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1>HTML DOM QuerySelector Method In JavaScript</h1>
    </div>
    <br>
    <div class="well">
        <h2 class="example">A heading with class="example"</h2>
        <p class="example">A paragraph with class="example".</p>
        <h2 id="demo">This is a p element with id="demo".</h2>
        <div>
            <h3>H3 element</h3>
            <h4>I am a p element, my parent is a div element.</h4>
        </div>

        <div>
            <h3>H3 element</h3>
            <h4>I am a p element, my parent is also a div element.</h4>
        </div>

        <button class="btn btn-primary" onclick="change_text()">Click it</button><br><br>
        <button class="btn btn-primary"  onclick="burlywood()">Click it</button><br><br>
        <button class="btn btn-primary"  onclick="darkseagreen()">Click it</button><br><br>
        <button class="btn btn-primary"  onclick="div()">Click it</button><br><br>

    </div>
    <br>
</div>
</body>
</html>
<script>
    function burlywood() {
        document.querySelector(".example").style.backgroundColor = "burlywood";
    }
    function darkseagreen() {
        document.querySelector("p").style.backgroundColor = "darkseagreen";
    }
    function change_text() {
        document.querySelector("#demo").innerHTML = "Hello World!Welcome to Bajarangisoft";
    }

    function div() {
        var x = document.querySelector("div > h4");
        x.style.backgroundColor = "red";
    }
</script>

Related Post