В чём разница между `document.querySelector()` и `document.getElementById()`?

Коротко

Оба ищут элемент в DOM, но по-разному:

• getElementById(id) — только по id, быстрее и проще.
• querySelector(selector) — любой CSS-селектор, возвращает первый матч.

Примеры

const byClass = document.querySelector(".my-class");
const byId = document.getElementById("my-id");

// querySelector умеет сложное
const nested = document.querySelector("form .error:not(.hidden)");

Нюансы для интервью

1. В getElementById("my-id") не пишут #.
2. querySelector("#my-id") тоже найдёт по id, но это селекторный движок.
3. Для всех совпадений — querySelectorAll (NodeList), не getElementById.
4. Id в документе должен быть уникален; селектор может матчить много узлов — берётся первый.

Итог: id известен и стабилен → getElementById. Нужен гибкий CSS-поиск → querySelector.