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

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

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

innerHTML

Свойство innerHTML позволяет получить или установить HTML-содержимое элемента. Вы можете изменить содержимое элемента, присвоив ему новое значение HTML.

const element = document.getElementById('myElement');
element.innerHTML = '<h1>Привет, мир!</h1>';

textContent

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

const element = document.getElementById('myElement');
element.textContent = 'Привет, мир!';

Изменение атрибутов и стилей

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

setAttribute

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

const element = document.getElementById('myElement');
element.setAttribute('src', 'image.jpg');

style

Свойство style позволяет изменять CSS-стили элемента. Вы можете изменять различные стили, указывая их названия и новые значения.

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

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

DOM также предоставляет методы для добавления и удаления элементов. Вот несколько примеров:

createElement

Метод createElement позволяет создать новый элемент. Вы можете указать тип элемента в виде строки.

const newElement = document.createElement('div');

appendChild

Метод appendChild позволяет добавить новый элемент внутрь другого элемента в качестве его дочернего элемента.

const parentElement = document.getElementById('parentElement');
parentElement.appendChild(newElement);

removeChild

Метод removeChild позволяет удалить указанный элемент из его родительского элемента.

const parentElement = document.getElementById('parentElement');
parentElement.removeChild(elementToRemove);

Поиск элементов DOM

Для выполнения манипуляций с элементами DOM часто требуется сначала найти нужные элементы. В дополнение к уже упомянутым в предыдущей статье методам (getElementById, getElementsByClassName, getElementsByTagName, querySelector), DOM также предоставляет другие методы для поиска элементов:

querySelectorAll

Этот метод позволяет выбрать все элементы, соответствующие указанному селектору CSS.

const elements = document.querySelectorAll('.myClass');

getElementsByName

Этот метод позволяет получить все элементы с указанным атрибутом name.

const elements = document.getElementsByName('myName');

closest

Метод closest позволяет найти ближайшего родителя, удовлетворяющего указанному селектору CSS.

const parentElement = element.closest('.parentClass');

Обход и изменение структуры DOM

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

parentNode

Свойство parentNode позволяет получить ссылку на родительский элемент.

const parentElement = element.parentNode;

childNodes

Свойство childNodes позволяет получить коллекцию всех дочерних узлов (включая текстовые узлы).

const childNodes = parentElement.childNodes;

Текстовые узлы в DOM — это часть содержимого элементов, которая содержит только текстовую информацию. Они представляются свойством nodeValue или textContent и могут быть созданы с помощью метода createTextNode. Они используются для хранения и манипуляции текстом в элементах DOM.

children

Свойство children позволяет получить коллекцию только дочерних элементов (исключая текстовые узлы).

const children = parentElement.children;

appendChild

Метод appendChild позволяет добавить элемент в конец списка дочерних элементов указанного родительского элемента.

parentElement.appendChild(newElement);

insertBefore

Метод insertBefore позволяет вставить элемент перед указанным элементом в качестве его соседа.

parentElement.insertBefore(newElement, referenceElement);

remove

Метод remove позволяет удалить элемент из его родительского элемента.

elementToRemove.remove();

cloneNode

Метод cloneNode позволяет создавать копию элемента, включая его дочерние элементы.

const cloneElement = element.cloneNode(true);

Работа с классами элементов

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

classList

Свойство classList предоставляет набор методов для работы с классами элемента.

element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('toggleClass');
element.classList.contains('checkClass');

Вот краткое описание каждого из методов, используемых с объектом classList элемента DOM:

Метод add добавляет указанный класс к списку классов элемента.
Метод remove удаляет указанный класс из списка классов элемента.
Метод toggle переключает класс в списке классов элемента. Если класс присутствует, он будет удален; если отсутствует, он будет добавлен.
Метод contains проверяет, содержит ли список классов элемента указанный класс. Он возвращает true, если класс присутствует, и false, если отсутствует.

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