Работа с DOM: манипуляции без фреймворков

Как получить доступ к элементам

Самые популярные методы:

• document.querySelector() — первый подходящий элемент
• document.querySelectorAll() — список элементов
• getElementById() — поиск по id

Пример:

const button = document.querySelector('.btn');
const title = document.getElementById('title');

Изменение содержимого

Для замены текста используйте textContent, а для HTML — innerHTML. Если данные приходат от пользователя, безопаснее применять именно textContent, чтобы снизить риск XSS.

title.textContent = 'Новый заголовок';

Работа с атрибутами и классами

Менять атрибуты удобно через setAttribute(), а классы — через classList.

button.setAttribute('disabled', 'true');
button.classList.add('active');
button.classList.remove('hidden');
button.classList.toggle('dark');

Создание и удаление элементов

Можно создавать новые узлы без шаблонизаторов и библиотек.

const item = document.createElement('li');
item.textContent = 'Новый пункт';
document.querySelector('ul').appendChild(item);
item.remove();

События

Интерактивность строится через addEventListener().

button.addEventListener('click', () => {
  document.body.classList.toggle('theme-dark');
});

Лучше избегать inline-обработчиков вроде onclick в HTML — так код легче поддерживать и тестировать.

Оптимизация DOM-манипуляций 🚀

Частые изменения DOM могут вызывать лишние перерисовки. Полезные практики:

• кэшировать найденные элементы в переменные
• обновлять DOM пакетно, а не по одному узлу в цикле
• использовать DocumentFragment для массовой вставки
• по возможности менять классы, а не множество стилей по отдельности

Пример:

const fragment = document.createDocumentFragment();

for (let i = 0; i < 5; i++) {
  const li = document.createElement('li');
  li.textContent = `Элемент ${i + 1}`;
  fragment.appendChild(li);
}

document.querySelector('ul').appendChild(fragment);

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

• работа с элементом до его появления в DOM
• использование innerHTML там, где достаточно textContent
• навешивание слишком большого числа обработчиков вместо делегирования событий
• прямое изменение стилей, усложняющее поддержку

Когда DOM без фреймворков — хороший выбор

• небольшие виджеты и лендинги
• админки с простой логикой
• проекты, где важны скорость загрузки и минимальный размер JS
• обучение JavaScript на фундаментальном уровне

Чистая работа с DOM помогает лучше понимать, как устроен браузерный рендеринг, события и обновление интерфейса. Даже если в проекте используются React, Vue или Angular, знание нативных DOM-манипуляций остаётся важным навыком для любого frontend-разработчика 🧠

📌 Для тех, кто следит за трендами и практикой разработки: стоит посмотреть подборку каналов про IT — там часто публикуют полезные разборы, инструменты и кейсы.

🗣 Подборки каналов
🧠 Каталог ботов и приложений
🗺 Навигация