Тоже долго вкуривал про querySelector.
Вот как его легко понять:
К примеру, у тебя есть каскад из блоков или несколько блоков с одинаковым классом.
<ul>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
<li>Elem</li>
</ul>
С помощью querySelector ты можешь добраться например до 2 или 3 элемента по css селектору, не добавляя лишних классов в HTML
Вот так
var a = document.querySelector('ul > li:nth-child(3)'); // берем 3 элемент li в списке ul.
a.classList.add('active'); // добавляем класс active 3 элементу
Запись повторяет точь в точь как в css
ul > li:nth-child(3) {
color: red;
}
