In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > querySelector

querySelector method

Browser support:

8	3.5

Returns a reference to the first descendant element of the current element, that matches the specified selectors.

Note: The querySelector method is supported in Internet Explorer from version 8 and Firefox from version 3.5. In Internet Explorer, only the hover and active pseudo classes are supported, the other pseudos raise exceptions.

The querySelector method only returns the first node that matches the specified selectors, if you need all the matches, use the querySelectorAll method instead. You can find further examples on that page.

If you want to query for elements with a specified class name, use the getElementsByClassName method.

Syntax:

object.querySelector (selectors);

You can find the related objects in the Supported by objects section below.

Parameters:

selectors

String that specifies the chain of selectors. The syntax and the meaning of this string is the same as selector declaration in CSS. If you want to read more about it, please see the selectors and pseudos page.

Return value:

Returns the first matching node if found, else returns null. If the expression is invalid raises a SYNTAX_ERR exception.

Example HTML code 1:

This example illustrates how you can get the first descendant element of a division element that the '.red' selector is assigned to:

<head>
    <style>
        .red {
            color:#FF0000;
        }
    </style>
    <script type="text/javascript">
        function GetRedElement () {
            var container = document.getElementById ("container");
            if (container.querySelector) {
                var firstRed = container.querySelector (".red");
                alert ("The contents of the first red element: \n" + firstRed.innerHTML);
            }
            else {
                alert ("Your browser does not support the querySelector method.");
            }
        }
    </script>
</head>
<body>
    <button onclick="GetRedElement ()">Get the first red element in the container!</button>
    <br /><br />
    <div id="container">
        <b class="red">First red element in the container.</b>
        <br />
        <b class="red">Second red element in the container.</b>
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates how you can get the first descendant element of a division element that the :checked pseudo is assigned to. Note that in Internet Explorer 8, only the hover and active pseudo classes are supported, the other pseudos raise exceptions.

<head>
    <style>
        :checked {
            margin-right: 20px;
        }
    </style>
    <script type="text/javascript">
        function GetCheckedElement () {
            var container = document.getElementById ("container");
            if (container.querySelector) {
                try {
                    var firstChecked = container.querySelector (":checked");
                    if (firstChecked) {
                        alert ("The id of the first checked element: \n" + firstChecked.id);
                    }
                    else {
                        alert ("There is no checked element in the container.");
                    }
                }
                catch (e) {
                    alert ("Your browser does not support the querySelector method for the :checked pseudo.");
                }
            }
            else {
                alert ("Your browser does not support the querySelector method.");
            }
        }
    </script>
</head>
<body>
    <button onclick="GetCheckedElement ()">Get the first checked element in the container!</button>
    <br /><br />
    <div id="container">
        <input type="checkbox" id="firstCheck" /><label for="firstCheck">First option</label>
        <br />
        <input type="checkbox" id="secondCheck" checked="checked" /><label for="secondCheck">Second option</label>
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates how you can get the first descendant b element of a division element that the '.red' selector is assigned to:

<head>
    <style>
        .red {
            color:#FF0000;
        }
    </style>
    <script type="text/javascript">
        function GetRedBoldElement () {
            var container = document.getElementById ("container");
            if (container.querySelector) {
                var firstRed = container.querySelector ("b.red");
                alert ("The contents of the first red B element: \n" + firstRed.innerHTML);
            }
            else {
                alert ("Your browser does not support the querySelector method.");
            }
        }
    </script>
</head>
<body>
    <button onclick="GetRedBoldElement ()">Get the red B element in the container!</button>
    <br /><br />
    <div id="container">
        <span class="red">Red span element.</span>
        <br />
        <b class="red">Red bold element.</b>
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example illustrates how you can get the first descendant element of a division element that the '.red' or '.serif' selector is assigned to:

<head>
    <style>
        .red {
            color:#FF0000;
        }
        .serif {
            font-family:sans-serif;
        }
    </style>
    <script type="text/javascript">
        function GetRedSerifElement () {
            var container = document.getElementById ("container");
            if (container.querySelector) {
                var firstRed = container.querySelector (".red, .serif");
                alert ("The contents of the first red and / or serif element: \n" + firstRed.innerHTML);
            }
            else {
                alert ("Your browser does not support the querySelector method.");
            }
        }
    </script>
</head>
<body>
    <button onclick="GetRedSerifElement ()">Get the red serif element in the container!</button>
    <br /><br />
    <div id="container">
        <b>black bold element</b>
        <br />
        <b class="red">Red element in the container.</b>
        <br />
        <b class="red serif">Red serif element in the container.</b>
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 5:

This example illustrates how you can get the first descendant element of a division element that both the '.red' and '.serif' selectors are assigned to:

<head>
    <style>
        .red {
            color:#FF0000;
        }
        .serif {
            font-family:sans-serif;
        }
    </style>
    <script type="text/javascript">
        function GetRedSerifElement () {
            var container = document.getElementById ("container");
            if (container.querySelector) {
                var firstRed = container.querySelector (".red.serif");
                alert ("The contents of the first red serif element: \n" + firstRed.innerHTML);
            }
            else {
                alert ("Your browser does not support the querySelector method.");
            }
        }
    </script>
</head>
<body>
    <button onclick="GetRedSerifElement ()">Get the red serif element in the container!</button>
    <br /><br />
    <div id="container">
        <b class="red">Red element in the container.</b>
        <br />
        <b class="red serif">Red serif element in the container.</b>
    </div>
</body>