Элемент DOM в JS: практическое руководство с примерами

Раздел: Веб-разработка -> DOM API

Веб-страница в браузере представлена в виде объектной модели документа (DOM). Каждый тег, атрибут или текст становится узлом (node). Узел-элемент (Element) является основой для взаимодействия со страницей через JavaScript. Понимание свойств и методов DOM элемента необходимо для динамического изменения контента, стилей и структуры.

Современный универсальный подход

Наиболее эффективный способ работы с DOM элементом сегодня базируется на наборе современных API: querySelector / querySelectorAll для выборки, textContent для текста, classList для классов, dataset для data-атрибутов, createElement в сочетании с append/prepend для вставки, remove для удаления и addEventListener для событий. Такой код легко читается, реже приводит к ошибкам и работает во всех современных браузерах.

// Получаем элемент по селектору
const container = document.querySelector('.container');

// Меняем текст
container.textContent = 'Новый текст';

// Добавляем класс
container.classList.add('active');

// Читаем data-атрибут
const id = container.dataset.id;

// Создаём и вставляем новый элемент
const newEl = document.createElement('div');
newEl.textContent = 'Дочерний';
container.append(newEl);

// Удаляем элемент
newEl.remove();

Js id (идентификатор элемента в javascript)

Этот подход решает 90% повседневных задач и служит отправной точкой для изучения альтернатив.

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

Классический способ - getElementById. Он быстрый, но не гибкий. Современная альтернатива - querySelector с символом решётки.

// Старый способ
const old = document.getElementById('myId');

// Новый способ
const modern = document.querySelector('#myId');

Js name (имя элемента в javascript)

Оба возвращают элемент или null.

Js элемент (элемент dom в javascript)

Ошибка: в querySelector селектор обязан быть валидным CSS. Если id содержит спецсимволы, их нужно экранировать. getElementById не требует экранирования. Выбор зависит от контекста: если нужен только один элемент и id известен - getElementById предпочтительнее по скорости.

Цель: получение уникального элемента для дальнейших манипуляций.

Как безопасно изменить текстовое содержимое?

innerHTML позволяет вставить HTML, но создаёт риск XSS. textContent интерпретирует всё как текст и безопасен.

const el = document.querySelector('.output');

// Опасно: если в data пришёл 


		

	
Элемент DOM в JavaScript - comments
En
Js элемент (javascript)