Interactive online courses HTML Academy
2026-03-09 12:56 Diff
https://htmlacademy.org/courses/javascript-basics/element-collections-properties/queryselectorall-vs-collection

We discovered that a pop-up appears when you click on the first button, but when you click on the second, nothing happens. The pop-up closes normally, but the tooltip itself is missing from it. Let’s figure out what’s going on!

Why isn’t the second button working? The thing is that the querySelector method returns or rather transmits information about only one element. If a selector is specified in parentheses that matches several elements on the page, then only the first of them is returned. What should you do if you need to find all of the elements? Use the querySelectorAll method:

// Finds all paragraphs on the page let elements = document. querySelectorAll ('p');

The querySelectorAll method finds all the elements on the page that match the specified selector, and it returns a set of these elements, namely a collection.

A collection, like a regular element, can be saved in a variable. The simplest method of finding out which elements are in the collection is to output it to the console:

// Displays the collection in the console. console.log(elements);

In our console, the collection looks like a list in which the elements are listed in comma-separated fashion. The entire list is enclosed in square brackets, and only the element tag and, for example, class are specified for the elements:

To display the elements in the same way as in the markup, you need to expand the collection by clicking on the triangle arrow on the left:

[p.card__text, p, p, p] 

[p.card__text, p, p] 

<p class="card__text">Let’s make ice cream!</p> 

<p>St. Petersburg</p> 

<p>mail@htmlacademy.ru</p> 

The word-buttons on our website are elements with the tooltip-button class. Tell JavaScript to find all of them and to display the obtained collection in the console.