DOM (Document Object Model) представляет собой структуру, в которой браузер представляет HTML-документы. С помощью JavaScript вы можете манипулировать DOM, изменять структуру, содержимое и стили HTML-страницы, создавая динамические и интерактивные веб-приложения.

Получение элементов DOM

Прежде чем начать манипулировать DOM, вам нужно получить доступ к элементам страницы. Для этого используются различные методы и свойства, такие как getElementById, querySelector, getElementsByTagName и другие.

Пример получения элемента по идентификатору:

const element = document.getElementById('myElement');

Пример получения элемента по селектору:

const element = document.querySelector('.myClass');

Изменение содержимого элементов

JavaScript позволяет изменять содержимое элементов DOM, включая текст, атрибуты и HTML-структуру. Например, вы можете изменить текстовое содержимое элемента, установить значение атрибута или добавить новый HTML-код.

Пример изменения текстового содержимого элемента:

const element = document.getElementById('myElement');
element.textContent = 'Новый текст';

Пример изменения значения атрибута элемента:

const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');

Пример добавления HTML-кода в элемент:

const container = document.getElementById('container');
container.innerHTML = '<p>Новый параграф</p>';

Изменение стилей элементов

С помощью JavaScript вы также можете изменять стили элементов, что позволяет создавать интерактивные эффекты и анимации на веб-странице.

Пример изменения стиля элемента:

const element = document.getElementById('myElement');
element.style.backgroundColor = 'red';
element.style.fontSize = '20px';

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

JavaScript позволяет создавать новые элементы DOM и добавлять их на страницу. Вы также можете удалять существующие элементы.

Пример создания нового элемента и добавления его на страницу:

const newElement = document.createElement('div');
newElement.textContent = 'Новый элемент';
document.body.appendChild(newElement);

Пример удаления элемента:

const element = document.getElementById('myElement');
element.parentNode.removeChild(element);

Заключение

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

Изучайте и экспериментируйте с манипуляциями DOM, чтобы создавать уникальные и привлекательные пользовательские интерфейсы.