Манипуляция DOM в JavaScript

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

Изменение содержимого элементов DOM — одна из основных задач при работе с веб-страницами. Вы можете изменять текст, атрибуты и стили элементов.

Пример:

// Найти элемент по его id
const paragraph = document.getElementById('my-paragraph');

// Изменить текст в параграфе
paragraph.textContent = 'Новый текст в параграфе';

// Изменить атрибут
const image = document.getElementById('my-image');
image.src = 'новый-путь-к-изображению.jpg';

// Изменить стили
const button = document.getElementById('my-button');
button.style.backgroundColor = 'blue';

Добавление элементов

Добавление новых элементов в DOM позволяет создавать динамические контентные элементы. Это может быть полезно, например, для создания списков, добавления новых параграфов и других элементов.

Пример:

// Создать новый элемент
const newParagraph = document.createElement('p');

// Установить текст в новом параграфе
newParagraph.textContent = 'Новый параграф';

// Найти родительский элемент, к которому вы хотите добавить новый параграф
const parentElement = document.getElementById('parent-element');

// Добавить новый параграф к родительскому элементу
parentElement.appendChild(newParagraph);

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

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

Пример:

// Найти элемент, который нужно удалить
const elementToRemove = document.getElementById('element-to-remove');

// Найти родительский элемент
const parentElement = elementToRemove.parentNode;

// Удалить элемент из родительского элемента
parentElement.removeChild(elementToRemove);