document.querySelectorAll gets all of the elements that match the specified CSS selector

querySelectorAll(<selector>) gets all of the elements that match the specified CSS selector. The return type is HTMLElement[]. 

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
    </head> 
    <body> 
        <img id="apple" src="apple.png"/> 
        <script> 
            var elems = document.querySelectorAll("p, img#apple") 
            document.writeln(elems.length); 
        </script> 
    </body> 
</html>
Click to view the demo 
 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
    </head> 
    <body> 
        <pre id="results"></pre> 
        <p id="tblock"> 
            This is a HTML document. 
            <span id="banana">b</span> 
            <span id="apple">a</span>, 
            <span="orange">C</span="orange"> 
        </p> 
            <script> 
                
                var selElems = document.querySelectorAll("#tblock > span"); 
                document.writeln(selElems.length); 
            </script> 
    </body> 
</html>
Click to view the demo

The following code if the document object has the querySelectorAll method.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
    </head> 
    <body> 
        <p id="paratext"> 
            This is a test.
            This is a test.
            This is a test.
            <img src="apple.png" alt="apple"/> 
        </p> 
        <script> 
            var images; 
            if (document.querySelectorAll) { 
                images = document.querySelectorAll("#paratext > img"); 
            } else { 
                images = document.getElementById("paratext").getElementsByTagName("img"); 
            } 
            for (var i = 0; i < images.length; i++) { 
                images[i].style.border = "thick solid black"; 
                images[i].style.padding = "4px"; 
            } 
        </script> 
    </body> 
</html>
Click to view the demo
Home 
  JavaScript Book 
    DOM  

Document:
  1. The Document Object
  2. document.body returns the body element as HTMLBodyElement
  3. document.characterSet returns document character set encoding
  4. document.charset gets or sets the document character set encoding
  5. document.compatMode
  6. document.cookie reads and writes cookies
  7. document.defaultCharset gets the default character encoding
  8. document.defaultView
  9. document.getElementsByTagName( tagName )
  10. document.getElementsByClassName ( className )
  11. document.getElementsByName ( nameOfNameAttribute )
  12. document.images gets all the img elements and returns HTMLCollection storing all images
  13. document.lastModified returns the last modified time of the document
  14. document.location returns the URL of the current document as Location class
  15. document.implementation property has information about the implementation of the DOM features
  16. document.querySelectorAll gets all of the elements that match the specified CSS selector
  17. document.readyState
  18. document.title returns the document title, changes the document title
  19. document.URL property returns the URL of the current document
  20. document.writeln() appends content to the end of the HTML document
  21. Using Properties to Obtain Element Objects