Справочник · JavaScript

getElementById: находим элемент по id

Редакция PraktumОбновлено 24 октября 20266 мин чтенияУровень: новичок

Метод document.getElementById() возвращает элемент, у которого атрибут id совпадает с переданной строкой, или null, если такого элемента нет. id передают без решётки: getElementById('menu'). Это самый быстрый и простой способ найти один конкретный элемент на странице.

Минимальный пример

<p id="status">Ждём действия</p>
<button id="save" type="button">Сохранить</button>

const status = document.getElementById('status');
const save = document.getElementById('save');

if (status && save) {
  save.addEventListener('click', () => {
    status.textContent = 'Сохранено';
  });
}

Скрипт находит абзац и кнопку по их id и по клику меняет текст. Проверка if (status && save) защищает от ошибки, если на этой странице элементов нет.

Синтаксис

const element = document.getElementById(id);

Почему вернулся null

Три самые частые причины: опечатка или неверный регистр (Menu и menu — разные id); решётка в аргументе (getElementById('#menu') ищет id «#menu»); скрипт выполнился раньше, чем браузер разобрал нужный HTML.

<!-- скрипт в head: элементов ещё нет -->
<script src="app.js"></script>

<!-- правильно: отложить выполнение -->
<script src="app.js" defer></script>

С атрибутом defer скрипт выполнится после разбора всего HTML. Второй вариант — подключать скрипт перед закрывающим </body>. Если результат всё равно null, выведи его в консоль и проверь id в панели Elements.

getElementById, querySelector и другие

«Живая» коллекция сама обновляется при изменении DOM: если удалить элемент с классом, он исчезнет и из коллекции. Это ломает циклы, которые удаляют элементы по ходу. NodeList из querySelectorAll статичный, с ним такой проблемы нет.

id, который начинается с цифры

document.getElementById('1tab');      // работает
document.querySelector('#1tab');       // ошибка: неверный селектор
document.querySelector('#' + CSS.escape('1tab')); // работает

В HTML id может начинаться с цифры, но в CSS-селекторе так писать нельзя. getElementById принимает строку, а не селектор, поэтому экранирование ему не нужно. Это одно из немногих практических преимуществ метода перед querySelector.

Почему нет element.getElementById

const card = document.getElementById('card-12');
card.getElementById('price');   // TypeError: не функция
card.querySelector('.price');    // правильно

id уникален на всю страницу, поэтому искать его внутри элемента не имеет смысла — метод есть только у документа. Для поиска внутри конкретного блока используй element.querySelector().

Глобальные переменные по id

Браузеры создают глобальную переменную с именем id: элемент <div id="menu"> доступен как window.menu и просто menu. Не полагайся на это: такая переменная перекрывается любой одноимённой, ломается с id вроде main-menu и делает код непонятным. Явный getElementById надёжнее.

Уникальность id

По стандарту id в документе должен быть уникальным. При дублях getElementById вернёт первый элемент, а второй останется недоступным — ошибку легко пропустить. Ещё хуже для форм: label for="email" привяжется только к первому полю. Если одинаковых элементов несколько (карточки, кнопки в списке), используй класс или data-атрибут и querySelectorAll.

getElementById или querySelector

Скорость у обоих на практике одинаково высокая: разница в долях миллисекунды, выбирать стоит по удобству.

Частые ошибки

• Пишут решётку: getElementById('#menu').
• Путают регистр: id Menu не найдётся по строке menu.
• Подключают скрипт в head без defer, и элемент ещё не существует.
• Вызывают element.getElementById — у элементов такого метода нет.
• Дают одинаковый id нескольким элементам и получают только первый.

Доступность

id нужен не только скриптам: на нём держатся связи доступности. label for, aria-labelledby, aria-describedby и якорные ссылки ссылаются на id. Поэтому уникальность id важна для скринридеров так же, как для JavaScript. Меняя текст элемента через скрипт, сообщай о важных изменениях через область с aria-live.

Поддержка браузерами

getElementById — один из старейших методов DOM, работает во всех браузерах. CSS.escape из примера поддерживается всеми актуальными браузерами.

const input = document.getElementById('name');
const button = document.getElementById('greet');
const result = document.getElementById('result');

if (input && button && result) {
  button.addEventListener('click', () => {
    const name = input.value.trim();
    result.textContent = name ? `Привет, ${name}!` : 'Введите имя';
  });
}