YouTip

[ Document Object](#) ## Example Get all elements with class="example" in the document: var x = document.querySelectorAll(".example"); [Try it »](#) * * * ## Definition and Usage The querySelectorAll() method returns all elements in the document that match the specified CSS selectors, returning a (#) object. A NodeList object represents a collection of nodes. It can be accessed by index, starting from 0. **Tip:** You can use the (#) property of the NodeList object to get the number of elements matching the selector, and then you can iterate through all elements to get the information you need. For more CSS selectors, refer to the (#) and the (#). * * * ## Browser Support The numbers in the table specify the first browser version that fully supports the method. | Method | | | | | | | --- | --- | --- | --- | --- | --- | | querySelectorAll() | 4.0 | 8.0 | 3.5 | 3.2 | 10.0 | **Note:** Internet Explorer 8 supports CSS2 selectors. IE9 and later versions support CSS3 selectors. * * * ## Syntax elementList = document.querySelectorAll(selectors); * elementList is a static NodeList type object. * selectors is a string containing one or more CSS selectors separated by commas. ## Parameter Values | Parameter | Type | Description | | --- | --- | --- | | _CSS selectors_ | String | Required. Specifies one or more elements to match the CSS selectors. Elements can be selected using id, class, type, attributes, attribute values, etc. as selectors. Multiple selectors are separated by commas (,). **Tip:** For more information on CSS selectors, refer to the (#). | * * * ## Method | DOM Version: | Level 1 Document Object | | --- | | Return Value: | A NodeList object representing all elements in the document that match the specified CSS selectors. NodeList is a static NodeList type object. If the specified selector is invalid, a SYNTAX_ERR exception is thrown. | ## More Examples ## Example Get all

elements in the document, and set the background color of the first matched

element (index 0): var x = document.querySelectorAll("p"); x.style.backgroundColor = "red"; [Try it »](#) ## Example Get all

elements with class="example" in the document, and set the background color of the first matched

element (index 0): var x = document.querySelectorAll("p.example"); x.style.backgroundColor = "red"; [Try it »](#) ## Example Count the number of

elements with class="example" in the document (using the length property of the NodeList object): var x = document.querySelectorAll(".example").length; [Try it »](#) ## Example Set the background color of all elements with class="example" in the document: var x = document.querySelectorAll(".example"); var i; for(i = 0; i<x.length; i++){x.style.backgroundColor = "red"; } [Try it »](#) ## Example Set the background color of all

elements in the document: var x = document.querySelectorAll("p"); var i; for(i = 0; i<x.length; i++){x.style.backgroundColor = "red"; } [Try it »](#) ## Example Find all tags in the document that contain the "target" attribute, and set a border for them: var x = document.querySelectorAll("a"); var i; for(i = 0; i<x.length; i++){x.style.border = "10px solid red"; } [Try it »](#) ## Example Find all

elements whose parent element is