07. Работа с DOM

Что такое DOM

DOM (Document Object Model) — это представление HTML-страницы в виде дерева объектов. Каждый тег — это отдельный объект, с которым можно работать из JavaScript.
Представь, что страница — это дерево, а каждый HTML-элемент — веточка. JavaScript может находить, изменять, добавлять и удалять эти веточки.

Пример структуры DOM

```html <html> <body> <h1>Заголовок</h1> <p>Параграф</p> </body> </html> ```

JavaScript видит это как иерархию объектов: `document → body → h1`, `p` и т.д.

Выбор элементов

Чтобы изменить страницу, нужно сначала получить доступ к элементу.
  • document.getElementById('id') — выбрать по ID
  • document.querySelector('селектор') — выбрать первый подходящий элемент (CSS-селектор)
  • document.querySelectorAll('селектор') — выбрать все подходящие элементы

Примеры


let title = document.getElementById('mainTitle');
let paragraph = document.querySelector('p');
let buttons = document.querySelectorAll('.btn');

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

Текст и HTML


let title = document.querySelector('h1');
title.textContent = 'Привет, мир!'; // заменяет текст
title.innerHTML = '<span style="color:red">Красный заголовок</span>'; // можно вставить HTML

Изменение стилей

Можно менять CSS-свойства напрямую: 

let box = document.querySelector('.box');
box.style.backgroundColor = 'lightblue';
box.style.padding = '20px';
box.style.borderRadius = '10px';

Добавление и удаление классов


let card = document.querySelector('.card');
card.classList.add('active'); // добавить класс
card.classList.remove('hidden'); // удалить класс
card.classList.toggle('dark'); // переключить класс

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

JavaScript может создавать HTML-элементы динамически. 

let newDiv = document.createElement('div');
newDiv.textContent = 'Я создан из JS!';
newDiv.classList.add('note');
document.body.appendChild(newDiv); // добавляем в конец body

Пример: создаём список</h3] 

let ul = document.createElement('ul');
for (let i = 1; i <= 3; i++) {
  let li = document.createElement('li');
  li.textContent = 'Элемент ' + i;
  ul.appendChild(li);
}
document.body.appendChild(ul);

Удаление элементов


let element = document.querySelector('#removeMe');
element.remove();

Манипуляции с атрибутами


let link = document.querySelector('a');
console.log(link.getAttribute('href'));
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');

[h3]Проверка наличия атрибута 


if (link.hasAttribute('href')) {
  console.log('У ссылки есть адрес');
}

[h2]События и реакции</h2] Чтобы страница реагировала на действия пользователя (нажатия, ввод и т.д.), используются обработчики событий.


let button = document.querySelector('button');
button.addEventListener('click', function() {
  alert('Кнопка нажата!');
});

[h3]Пример: изменение цвета при клике</h3] 


let box = document.querySelector('.color-box');
box.addEventListener('click', () => {
  box.style.backgroundColor = 'yellow';
});

[h2]Мини-практика</h2]

  • Создайте кнопку, которая при клике добавляет новый абзац с текстом «Вы нажали кнопку!».
  • Сделайте так, чтобы при наведении на элемент менялся его цвет, а при уходе мыши — возвращался обратно.
  • Создайте поле ввода и кнопку. При клике на кнопку отображайте введённый текст на странице.

[h3]Пример решения</h3] 


let btn = document.querySelector('#addBtn');
btn.addEventListener('click', () => {
  let p = document.createElement('p');
  p.textContent = 'Вы нажали кнопку!';
  document.body.appendChild(p);
});

[h2]Советы новичкам</h2]

  • Используйте querySelector() — он универсален и поддерживает все CSS-селекторы.
  • Не злоупотребляйте innerHTML — он может быть небезопасен, если вставляете данные от пользователя.
  • Сначала найдите элемент, потом изменяйте его. Ошибка "Cannot read properties of null" означает, что элемент не найден.
  • Добавляйте классы для оформления — это лучше, чем напрямую менять стили.

[h2]Итоги урока</h2] Теперь вы знаете:

  • Что такое DOM и как JavaScript работает с элементами страницы.
  • Как изменять текст, атрибуты и стили HTML-элементов.
  • Как добавлять, удалять и создавать новые элементы динамически.
  • Как реагировать на действия пользователя с помощью событий.

Следующий урок → События и обработчики