Работа с DOM

Что такое DOM?

DOM (Document Object Model) — это объектная модель, представляющая структуру HTML-документа в виде дерева, где каждый элемент является объектом.

Навигация по DOM

Для работы с DOM существуют различные методы, такие как getElementById, querySelector и querySelectorAll.

// Получение элемента по ID
let header = document.getElementById('header');
console.log(header.textContent); // Выводит текст внутри элемента с ID "header"

// Поиск первого элемента с указанным селектором
let firstParagraph = document.querySelector('p');
console.log(firstParagraph.textContent);

// Поиск всех элементов с указанным селектором
let allItems = document.querySelectorAll('.item');
allItems.forEach(item => console.log(item.textContent));
            

Изменение DOM

Вы можете динамически изменять содержимое элементов, их атрибуты и даже удалять или добавлять новые элементы.

// Изменение текста элемента
let header = document.getElementById('header');
header.textContent = "Новый заголовок";

// Изменение атрибутов элемента
let link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');

// Создание нового элемента и добавление его в DOM
let newDiv = document.createElement('div');
newDiv.textContent = "Новый элемент";
document.body.appendChild(newDiv);

// Удаление элемента из DOM
let oldElement = document.getElementById('oldElement');
oldElement.remove();
            

Обработка событий DOM

События DOM позволяют взаимодействовать с пользователем. Например, можно реагировать на клики, нажатия клавиш и другие действия.

// Добавление обработчика события клика
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Кнопка нажата!');
});

// Добавление обработчика события нажатия клавиши
document.addEventListener('keydown', function(event) {
    console.log('Нажата клавиша:', event.key);
});