В JavaScript манипулирование элементами на веб-странице — обычная задача. Будь то динамическое обновление контента или реагирование на взаимодействия с пользователем, крайне важно иметь четкое понимание методов манипулирования элементами. В этой статье мы рассмотрим различные методы, в том числе метод.change(), для изменения элементов с использованием чистого JavaScript.

1. Метод.change():
   Метод.change() в основном используется для обработки изменений в элементах ввода формы, таких как текстовые поля, флажки, переключатели и раскрывающиеся списки выбора. Давайте рассмотрим пример:

const inputField = document.querySelector('#myInput');
inputField.addEventListener('change', function(event) {
  console.log('Value changed:', event.target.value);
});

В этом примере мы выбираем поле ввода с идентификатором «myInput» и присоединяем к нему прослушиватель событий изменения. Когда значение поля ввода изменится, сработает функция прослушивания событий, записывающая новое значение в консоль.

Чтобы изменить содержимое HTML-элемента, вы можете использовать следующие методы:

Изменяет текстовое содержимое элемента.

.innerHTML: изменяет HTML-содержимое элемента.

const myElement = document.querySelector('#myElement');
// Modifying text content
myElement.textContent = 'New text content';
// Modifying HTML content
myElement.innerHTML = '<strong>New HTML content</strong>';

3. Изменение атрибутов элемента.
   Вы можете изменить различные атрибуты элемента с помощью метода.setAttribute():

const myElement = document.querySelector('#myElement');
// Modifying the "src" attribute of an image element
myElement.setAttribute('src', 'newimage.jpg');
// Modifying the "href" attribute of a link element
myElement.setAttribute('href', 'https://example.com');

4. Добавление и удаление классов CSS.
   Чтобы добавить или удалить классы CSS из элемента, вы можете использовать свойство.classList вместе с его методами:

const myElement = document.querySelector('#myElement');
// Adding a CSS class
myElement.classList.add('highlight');
// Removing a CSS class
myElement.classList.remove('highlight');

В этой статье мы рассмотрели различные методы манипулирования элементами в JavaScript. Мы рассмотрели метод.change() для обработки изменений ввода формы, изменения содержимого элемента с помощью.textContent и.innerHTML, изменения атрибутов элемента с помощью.setAttribute() и добавления/удаления классов CSS с помощью.classList. Освоив эти методы, вы получите необходимые инструменты для создания динамических и интерактивных веб-приложений с использованием чистого JavaScript.

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