Как правильно работать с DOM в JavaScript в 2025 году?Работа с DOM (Document Object Model) — это основа веб-разработки. С каждым годом появляются новые, более эффективные способы манипуляции элементами страницы. Давайте разберём, как сегодня правильно работать с DOM в JavaScript, чтобы код был быстрым, удобным и безопасным.
1. Получение элементовВместо старых
getElementById и
getElementsByClassName сегодня лучше использовать
querySelector и
querySelectorAll. Они более универсальные и понятные.
const title = document.querySelector("#title"); // Получает 1 элемент (по id)
const buttons = document.querySelectorAll(".btn"); // Получает список всех кнопок с классом .btnquerySelector и
querySelectorAll позволяют находить элементы так же, как в CSS (
.класс,
#id,
input[type="text"] и т. д.). А также
querySelectorAll возвращает не «живую» коллекцию, а обычный статичный список (
NodeList), что логичнее при итерации.
2. Изменение текста и HTMLВсё зависит от того, что именно нужно поменять.
textContent — если надо изменить только текст (без HTML).
title.textContent = "Привет, мир!";
Не используйте
innerHTML, если вставляете данные от пользователя — это дыра в безопасности (XSS-атаки). Если всё же используется
innerHTML, убедитесь, что данные проверены.
title.innerHTML = "<strong>Важное сообщение!</strong>";
insertAdjacentHTML — отличная альтернатива
innerHTML, если нужно добавить HTML в определённое место, не перезаписывая весь элемент.
title.insertAdjacentHTML("beforeend", "<span> 👋</span>");3. Изменение классовПравильный способ через
classList, потому что `className`заменяет все классы сразу, из-за чего можно случайно удалить важные стили.
title.classList.add("highlight"); // Добавит класс
title.classList.remove("hidden"); // Удалит класс
title.classList.toggle("active"); // Переключит класс (если был — уберёт, если не было — добавит)4. Изменение стилейНе стоит вручную писать
style.cssText, потому что он затирает всё, что было до этого. Используйте
style для отдельных свойств.
title.style.color = "red";
title.style.fontSize = "24px";
Если нужно много стилей — лучше добавьте или измените класс. Так проще, централизованно и удобнее управлять дизайном.
title.classList.add("error"); // В CSS заранее определите .error { color: red; }5. Создание и добавление новых элементовЛучший способ — использовать
createElement, а не
innerHTML.
const newDiv = document.createElement("div"); // Создаём элемент <div>
newDiv.textContent = "Новый блок!";
newDiv.classList.add("box");
document.body.appendChild(newDiv); // Добавляем в конец <body>Если нужно добавлять элементы в разные места:
appendChild() — добавляет в
конец родителя.
prepend() — добавляет
в начало.
before() и
after() — добавляют перед или после элемента.
title.after(newDiv); // Вставит newDiv сразу после title
// С помощью append() можно сразу добавлять текст и несколько элементов
const container = document.querySelector(".container");
container.append("Просто текст", document.createElement("span"));
6. Удаление элементовСамый актуальный способ —
remove().
newDiv.remove(); // Удалит элемент из DOM
Раньше приходилось делать так (и это было неудобно):
newDiv.parentNode.removeChild(newDiv); // Старый подход
7. Обработчики событий (современный подход)Раньше часто использовали`onclick`, но перезаписывает предыдущие обработчики и плохо управляется. Лучше используйте
addEventListener.
const button = document.querySelector("#myButton");
button.addEventListener("click", () => {
alert("Кнопка нажата!");
});Мы рассказали только часть советов. Если знаете что-то ещё важное, о чем мы не рассказали тут, поделитесь в комментариях.#простымисловами #фронтенд
