В чем разница между querySelector и getElementById?
Тоже долго вкуривал про 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 элементу
Запись повторяет точь в точь как в cssul > li:nth-child(3) {
  color: red;
}
Вы не правы. querySelector позволяет найти элементы по ЛЮБОМУ допустимому селектору (как в CSS), а не только по ID.
Вообще, если бы чуть-чуть потрудились поискать, вы бы нашли вот это
https://learn.javascript.ru/searching-elements-dom