DOM (Document Object Model) — это мост между вашим JavaScript и HTML. Без него вы не сможете ни прочитать данные со страницы, ни изменить их. Если вы хотите оживить сайт, сделать его интерактивным, то без работы с DOM не обойтись. В этой статье мы разберём всё по полочкам: как находить элементы, менять их, создавать новые и удалять старые. Будет много примеров и практических советов.
Что такое DOM и с чем его едят
Представьте, что HTML-страница — это генеалогическое древо. Каждый тег — это родственник: у кого-то есть родители, дети, братья и сёстры. DOM — это то же самое дерево, только построенное браузером после загрузки страницы. JavaScript может лазить по этому дереву, находить нужные узлы и манипулировать ими.
Каждый элемент — это объект. У него есть свойства (например, textContent, style, classList) и методы (например, appendChild, remove, addEventListener). Всё это доступно через глобальный объект document.
Вот простой пример: как получить доступ к телу документа.
const body = document.body;
console.log(body); // выведет ...
Но это только начало. Давайте копнём глубже.
Как найти элементы на странице
Первое, что вам понадобится — это умение находить нужные элементы. Есть несколько способов, и у каждого свои особенности.
- getElementById — ищет по уникальному id. Быстро, но id должен быть уникальным.
- getElementsByClassName — возвращает живую коллекцию элементов с указанным классом.
- getElementsByTagName — ищет по имени тега (например, 'div').
- querySelector — возвращает первый элемент, подходящий под CSS-селектор.
- querySelectorAll — возвращает статическую коллекцию всех подходящих элементов.
Самые популярные сегодня — querySelector и querySelectorAll. Они гибкие, потому что используют CSS-селекторы. Например:
// Найти первый параграф с классом 'intro'
const intro = document.querySelector('p.intro');
// Найти все элементы с классом 'item'
const items = document.querySelectorAll('.item');
Обратите внимание: querySelectorAll возвращает не массив, а NodeList. Его можно перебирать через forEach, но некоторые методы массива (например, map) недоступны. Если нужен массив, используйте Array.from() или spread-оператор.
Манипуляции с элементами: создаём, меняем, удаляем
Найти элемент — это полдела. Настоящая магия начинается, когда вы начинаете его менять.
Создать новый элемент просто:
const newDiv = document.createElement('div');
newDiv.textContent = 'Привет, мир!';
newDiv.classList.add('my-class');
Теперь его нужно куда-то вставить. Для этого есть несколько методов:
- appendChild — добавляет элемент как последнего ребёнка.
- insertBefore — вставляет перед указанным элементом.
- append, prepend, before, after — более современные методы, позволяющие вставлять элементы и строки.
Пример:
const container = document.querySelector('.container');
container.appendChild(newDiv);
Чтобы изменить содержимое элемента, используйте textContent (для текста) или innerHTML (для HTML-разметки). Но будьте осторожны с innerHTML: он может стать дырой в безопасности, если вставляете данные от пользователя.
Удалить элемент можно методом remove():
newDiv.remove();
Или через родителя: parent.removeChild(child).
Вот таблица с основными методами для манипуляции:
| Метод | Описание |
|---|---|
| createElement | Создаёт новый элемент |
| appendChild | Добавляет элемент в конец родителя |
| insertBefore | Вставляет перед указанным элементом |
| remove | Удаляет элемент из DOM |
| replaceWith | Заменяет элемент другим |
Стили и классы: как менять внешний вид
Внешний вид элемента управляется через атрибут style или через классы. Работать с классами удобнее, потому что стили хранятся в CSS, а не в JS.
У каждого элемента есть свойство classList. Оно предоставляет методы:
- add — добавить класс
- remove — удалить класс
- toggle — переключить класс
- contains — проверить наличие класса
Пример:
const btn = document.querySelector('.btn');
btn.classList.add('active');
btn.classList.toggle('hidden');
Если нужно изменить стиль напрямую, используйте style:
btn.style.backgroundColor = 'blue';
btn.style.color = 'white';
Но помните: инлайн-стили имеют высокую специфичность, и их сложно переопределить. Лучше использовать классы.
События: делаем страницу интерактивной
DOM не был бы таким мощным без событий. События позволяют реагировать на действия пользователя: клики, наведение, ввод с клавиатуры и многое другое.
Самый распространённый способ подписки на событие — addEventListener:
const button = document.querySelector('button');
button.addEventListener('click', function(event) {
alert('Кнопка нажата!');
});
У события есть объект event, который содержит информацию о том, что произошло. Например, event.target — это элемент, на котором произошло событие.
Вот основные типы событий, которые вы будете использовать чаще всего:
| Событие | Когда срабатывает |
|---|---|
| click | Клик мышью по элементу |
| mouseover / mouseout | Наведение / уход курсора |
| keydown / keyup | Нажатие / отпускание клавиши |
| submit | Отправка формы |
| DOMContentLoaded | Загрузка и построение DOM |
Важно: если вы добавляете обработчик к элементу, который ещё не существует в DOM, он не сработает. Дождитесь загрузки страницы или используйте делегирование событий.
Делегирование — это приём, когда обработчик вешается на родителя, а затем проверяется event.target. Это позволяет работать с динамически добавляемыми элементами.
document.querySelector('.list').addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
console.log('Клик по элементу списка:', event.target.textContent);
}
});
Практические советы и типичные ошибки
Даже опытные разработчики иногда наступают на грабли. Вот несколько советов, которые сэкономят вам время и нервы.
- Не забывайте про производительность. Частые изменения DOM могут замедлить страницу. Если нужно добавить много элементов, создайте их в фрагменте (DocumentFragment) и вставьте один раз.
- Используйте делегирование событий для списков и динамических элементов.
- Проверяйте существование элемента перед манипуляцией, чтобы избежать ошибок null.
- Кэшируйте ссылки на элементы, если обращаетесь к ним многократно.
Пример использования DocumentFragment:
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const li = document.createElement('li');
li.textContent = `Элемент ${i}`;
fragment.appendChild(li);
}
document.querySelector('ul').appendChild(fragment);
Ещё одна частая ошибка — использование innerHTML для вставки пользовательских данных. Это может привести к XSS-атакам. Используйте textContent или создавайте элементы через createElement.
Что в итоге
Работа с DOM — это базовый навык для любого веб-разработчика. Вы научились находить элементы, создавать и удалять их, менять стили и обрабатывать события. Помните о производительности и безопасности. Практикуйтесь, и вы станете настоящим мастером манипуляций с DOM.
Главное — не бойтесь экспериментировать. Откройте консоль браузера и попробуйте что-нибудь сделать с текущей страницей. Это лучший способ закрепить материал.
Студия WNDER
