Урок 1.6: Работа с DOM в JavaScript

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

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

Для того чтобы взаимодействовать с элементами на странице, мы должны сначала получить доступ к ним. Существует несколько способов получения элементов:

document.getElementById()

Этот метод позволяет получить элемент страницы по его идентификатору. Например:

// Получаем элемент по id и добавляем ему содержимое
const element = document.getElementById('my-element');
element.innerHTML = 'Новый текст';

// Изменяем цвет фона элемента
element.style.backgroundColor = 'red';

// Изменяем значение атрибута src у изображения
const image = document.getElementById('my-image');
image.setAttribute('src', 'new-image.jpg');

document.querySelector()

Этот метод позволяет получить первый элемент на странице, соответствующий определенному селектору CSS. Например, чтобы получить первый элемент с классом "my-class":

// Получаем элемент по селектору и добавляем ему содержимое
const element = document.querySelector('.my-class');
element.innerHTML = 'Новый текст';

// Изменяем цвет фона элемента
element.style.backgroundColor = 'red';

// Изменяем значение атрибута src у изображения
const image = element.querySelector('img');
image.setAttribute('src', 'new-image.jpg');

document.querySelectorAll()

Этот метод позволяет получить все элементы на странице, соответствующие определенному селектору CSS. Например, чтобы получить все элементы с классом "my-class":

// Получаем все элементы по селектору и изменяем их содержимое
const elements = document.querySelectorAll('.my-class');
elements.forEach(function(element) {
  element.innerHTML = 'Новый текст';

  // Изменяем цвет фона элемента
  element.style.backgroundColor = 'red';

  // Изменяем значение атрибута src у изображения
  const image = element.querySelector('img');
  image.setAttribute('src', 'new-image.jpg');
});

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

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

Изменение содержимого

Для изменения содержимого элемента мы можем использовать свойство innerHTML. Например:

const element = document.getElementById('my-element');
element.innerHTML = 'Новый текст';

Изменение стилей

Для изменения стилей элемента мы можем использовать свойство style. Например, чтобы изменить цвет фона элемента:

const element = document.getElementById('my-element');
element.style.backgroundColor = 'red';

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

Для изменения атрибутов элемента мы можем использовать метод setAttribute(). Например, чтобы изменить значение атрибута src у изображения:

const image = document.getElementById('my-image');
image.setAttribute('src', 'new-image.jpg');

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

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

addEventListener()

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

const button = document.getElementById('my-button');
button.addEventListener('click', function() {
  console.log('Кнопка нажата');
});

Заключение

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