getElementById или querySelector — что выбрать новичку и в чём разница?

Оба находят элемент на странице, разница в том, что им передавать:

// по id, без решётки
document.getElementById('menu');

// по любому CSS-селектору, с решёткой для id
document.querySelector('#menu');
document.querySelector('.card');     // первый элемент с классом card
document.querySelector('button');    // первая кнопка

getElementById умеет искать только по id. querySelector понимает любой CSS-селектор (как в стилях): id, класс, тег, что угодно — и возвращает первый подходящий элемент.

Совет новичку: можно использовать только querySelector/querySelectorAll — их синтаксис как в CSS, и одного инструмента хватит на всё. Главное помни: для id нужна #, для класса ..