getElementById и старые методы

Если у элемента есть атрибут id, брать его нужно этим методом. Он возвращает либо сам элемент, либо null, если ничего не нашлось. Исключения не будет — проверка результата целиком на вашей совести, и обращение к свойству несуществующего элемента упадёт уже строкой ниже.

const intro = document.getElementById("intro");

console.log(intro.tagName);
console.log(intro.textContent);
console.log(document.getElementById("nope"));

Есть и побочный эффект, о котором полезно знать: для каждого id браузер заводит одноимённое свойство у window. Работает во всех браузерах — и всё равно так писать не стоит: любая ваша переменная с тем же именем перекроет это свойство, а читатель кода будет гадать, откуда взялась переменная banner.

console.log(window.banner === document.getElementById("banner"));
console.log(window.banner.textContent);

getElementById живёт только на document: у элемента такого метода нет. Логика простая — id уникален на всю страницу, искать его внутри куска разметки бессмысленно.

Когда элементов много, работают два соседних метода: getElementsByClassName ищет по классу, getElementsByTagName — по имени тега ("*" означает «любой»). Оба доступны и у document, и у любого элемента: вызов на элементе ограничивает поиск его потомками. Если в класс передать несколько имён через пробел, найдутся элементы, у которых есть все перечисленные классы; порядок не важен.

Возвращают они не массив, а HTMLCollection. Индексы и length есть, for..of работает, а вот map, filter и forEach — нет. Нужны методы массива — оберните в Array.from.

const items = document.getElementsByClassName("item");
console.log(items.length);
console.log(items[1].textContent);

const menu = document.getElementById("menu");
console.log(menu.getElementsByTagName("li").length);

console.log(Array.isArray(items));
console.log(Array.from(items).map((el) => el.textContent).join(","));

const wrap = document.getElementById("wrap");

console.log(wrap.getElementsByTagName("*").length);
console.log(document.getElementsByClassName("b a").length);
console.log(document.getElementsByClassName("a c").length);

Вот главное отличие старых методов от querySelectorAll: их коллекции живые. Это не снимок, сделанный в момент вызова, а постоянно действующий запрос к документу. Появился подходящий элемент — он сам возник в коллекции; исчез — сам пропал. Повторно вызывать метод не нужно.

const box = document.getElementById("box");
const live = box.getElementsByClassName("tag");
const frozen = document.querySelectorAll(".tag");
console.log(live.length, frozen.length);

const extra = document.createElement("span");
extra.className = "tag";
box.append(extra);

console.log(live.length);
console.log(frozen.length);

Пока вы только читаете length, живость — удобство. Ловушка начинается, когда цикл сам меняет документ: коллекция пересчитывается после каждого шага, индексы съезжают, и часть элементов остаётся необработанной. Классика жанра — перенос элементов из одного контейнера в другой циклом по возрастающему индексу.

const src = document.getElementById("src");
const dst = document.getElementById("dst");
const live = src.getElementsByClassName("x");

for (let i = 0; i < live.length; i++) {
  dst.append(live[i]);
}

console.log(src.children.length);
console.log(dst.children.length);

const from = document.getElementById("from");
const to = document.getElementById("to");
const live = from.getElementsByClassName("y");

for (const node of Array.from(live)) {
  to.append(node);
}

console.log(from.children.length);
console.log(to.children.length);

Соблазн заменить всё на querySelector понятен: один синтаксис вместо трёх методов. Но пара причин оставить старое в живых есть. Первая — getElementById ищет по идентификатору, а не по CSS-селектору, и ему безразлично, что внутри id: точки, двоеточия, скобки. Селектору не безразлично.

console.log(document.getElementById("user.admin").textContent);
console.log(document.querySelector("#user.admin"));

const safe = "#" + CSS.escape("user.admin");
console.log(document.querySelector(safe).textContent);

Вторая причина — та самая живость, когда она нужна: держите коллекцию в переменной, и её length всегда актуален без повторного поиска. Про скорость думать не стоит: разница между методами заметна разве что в синтетическом тесте на десятки тысяч вызовов.

Практическое правило: есть id — getElementById; нужна живая коллекция — getElementsBy*; во всех остальных случаях querySelector и querySelectorAll из прошлой статьи.