Как получить элемент страницы по id в JavaScript — getElementById или querySelector?
Делаю первую страничку с JS. Нужно достать <div id="box"> из HTML, чтобы потом менять. Видел getElementById и querySelector — чем они отличаются и как правильно получить элемент по id?
2 ответа
Оба достают элемент из DOM, разница в синтаксисе и гибкости.
getElementById — ищет строго по id, без решётки в строке:
const box = document.getElementById('box');
console.log(box.textContent);
querySelector — принимает любой CSS-селектор (как в стилях), для id с решёткой #:
const box = document.querySelector('#box'); // по id
const btn = document.querySelector('.btn'); // по классу
const first = document.querySelector('ul li'); // первый li внутри ul
querySelector возвращает первый подходящий элемент. Для всех сразу — querySelectorAll (вернёт коллекцию):
const items = document.querySelectorAll('.item');
items.forEach(el => console.log(el.textContent));
Что выбрать: для одного элемента по id — оба ок, getElementById чуть быстрее. querySelector универсальнее (любой селектор), поэтому в новом коде чаще берут его.
Очень частая ошибка — null. Если элемент не найден (опечатка в id, или скрипт выполнился до загрузки HTML), вернётся null, и любое обращение упадёт:
const box = document.getElementById('bxo'); // опечатка → null
// box.textContent = 'привет'; // TypeError: Cannot set properties of null
Лечится так: подключай <script> в конце <body> или оберни в DOMContentLoaded:
document.addEventListener('DOMContentLoaded', () => {
const box = document.getElementById('box');
// здесь box уже точно есть
});
Маленькое уточнение про решётку — самая частая опечатка:
document.getElementById('#box'); // null! здесь решётка НЕ нужна
document.querySelector('#box'); // верно, здесь решётка НУЖНА
В getElementById передаёшь чистый id без #, а в querySelector — полноценный CSS-селектор с #. Перепутать — классика жанра.