getElementById() в JavaScript

• Поиск по id
• Если элемент не найден
• getElementById() или querySelector()
• Итого

Поиск по id

Метод document.getElementById() находит элемент по его идентификатору id. В аргумент передают значение id без символа #.

<h2 id="profile-title">Профиль</h2>

const title = document.getElementById('profile-title');

title.textContent = 'Настройки профиля';

В переменную title попадёт заголовок h2, и его текст изменится.

Значение id должно быть уникальным на странице. Не пишите getElementById(‘#profile-title’): символ # используют только в CSS-селекторах.

Если элемент не найден

Если элемента с таким id нет в DOM, метод вернёт null. Когда элемент может отсутствовать, проверяйте результат перед работой с ним.

const message = document.getElementById('message');

if (message) {
  message.textContent = 'Готово';
}

null можно получить из-за опечатки в id или потому, что скрипт выполнился раньше, чем браузер создал разметку. Для внешнего скрипта обычно используют атрибут defer.

getElementById() или querySelector()

Оба способа найдут один и тот же элемент:

document.getElementById('profile-title');
document.querySelector('#profile-title');

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

Итого

document.getElementById() находит элемент по уникальному id и возвращает его или null. В аргумент передают значение без #. Для более гибкого поиска по CSS-селектору используйте querySelector().