Briefly
The method is defined for the document object and any HTML element (Element) of the page. It allows you to find all elements by CSS selector among the children. The CSS selector is passed as a parameter. This method is used very frequently in practice.
Returns a static collection similar to an array Node containing the found elements. If no elements were found, the collection will be empty, that is, of size 0.
How to write
The method takes one parameter — the CSS selector in the form of a string. For example, you can select all elements inside <div>
<body> <div> <p> Prince Vasily always spoke lazily, like an actor delivering a role from an old play. Anna Pavlovna Sherer, on the contrary, despite her forty years, was filled with excitement and impulses. </p> <p> Being an enthusiast became her social status, and sometimes, even when she did not want to, she became an enthusiast, so as not to disappoint the expectations of people who knew her. The restrained smile, which constantly played on Anna Pavlovna's face, although it did not suit her aging features, expressed, like that of spoiled children, a constant awareness of her charming flaw, which she does not want, cannot, and does not find the need to correct. </p> </div> <p>This is a paragraph, a child of body</p> <script> const paragraphs = document.querySelectorAll('div>p') console.log(paragraphs.length) // 2 // searching for a nonexistent element const spanFromBody = document.querySelectorAll('span') console.log(spanFromBody.length) // 0 </script></body><body> <div> <p> Prince Vasily always spoke lazily, like an actor delivering a role from an old play. Anna Pavlovna Sherer, on the contrary, despite her forty years, was filled with excitement and impulses. </p> <p> Being an enthusiast became her social status, and sometimes, even when she did not want to, she became an enthusiast, so as not to disappoint the expectations of people who knew her. The restrained smile, which constantly played on Anna Pavlovna's face, although it did not suit her aging features, expressed, like that of spoiled children, a constant awareness of her charming flaw, which she does not want, cannot, and does not find the need to correct. </p> </div> <p>This is a paragraph, a child of body</p> <script> const paragraphs = document.querySelectorAll('div>p') console.log(paragraphs.length) // 2 // searching for a nonexistent element const spanFromBody = document.querySelectorAll('span') console.log(spanFromBody.length) // 0 </script> </body>
Dynamic example, enter a selector in the search field and "Search":
How to understand
The method works with DOM, which is associated with HTML markup. Each HTML element has parent and child elements:
- Parents are elements that contain the current element. In the example above, the first element
<p>has two parent elements —<div>and<body>. - Child elements are elements that the current element contains. They may or may not exist. For instance, for the
<body>tag, all elements of the page are children. For<p>, its child element is the text inside the tag.
If you are working with the root of the page (the document object), then the search goes through all elements of the page (from <body>), if from a specific element, then the search goes only through all children.
In practice
Advice 1
🛠 To obtain a collection of all elements on the page, you need to pass the string '*' as an argument; it is called a wildcard.
🛠 The method returns a static collection. Unlike the methods get and get, which return live collections. A static collection is not automatically updated when new elements appear on the page. If fresh data is needed, you will have to restart the search.
🛠 Search results can be safely traversed using a loop.