Тоже долго вкуривал про 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;
}