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

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

querySelectorAll method

Browser support:

8	3.5

Returns a NodeList collection that contains all descendant elements of the current element that match the specified selectors.

Note: The querySelectorAll 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.

If you need only the first descendant node that mathes the specified selectors, use the querySelector method. 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.querySelectorAll (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 a NodeList collection filled with the matching elements in source order. But note, it is a static collection. That means that the modification of the document has no effect on the collection.

Example HTML code 1:

This example illustrates the use of the querySelectorAll method:

<head>
    <style>
        .red {
            color:#FF0000;
        }
    </style>
    <script type="text/javascript">
        function GetRedElements () {
            var container = document.getElementById ("container");
            var redTags = container.querySelectorAll (".red");

            for (var i = 0; i < redTags.length; i++) {
                var redTag = redTags[i];
                alert ("The contents of the " + (i + 1) + ". red element is\n" + redTag.innerHTML);
            }
        }
    </script>
</head>
<body>
    <button onclick="GetRedElements ()">Get the red elements 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>
    <br /><br />
    <b class="red">A red element outside the container.</b>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the meaning of static collections with the querySelectorAll method:

<head>
    <style>
        .red {
            color:#FF0000;
        }
    </style>
    <script type="text/javascript">
        function GetRedElements () {
            var container = document.getElementById ("container");
            var redTags = container.querySelectorAll (".red");

            alert ("There are " + redTags.length + " red elements in the returned collection.");

                // add a new red element to the container
            var newRedTag = document.createElement ("b");
            newRedTag.innerHTML = "new bold element";
            newRedTag.className = "red";
            container.appendChild (newRedTag);
            alert ("A new red element has been added to the container.");

            alert ("There are still " + redTags.length + " red elements in the returned collection.");

                // remove a red element from the container
            container.removeChild (newRedTag);
            alert ("A red element has been removed from the container.");

            alert ("There are still " + redTags.length + " red elements in the returned collection.");
            alert ("The modification of the document has no effect on the collection");
        }
    </script>
</head>
<body>
    <button onclick="GetRedElements ()">Get the number of red elements 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>
        <br />
    </div>
</body>