Карта сайта

Урок 20: Введение в DOM в JavaScript’е

/Уроки по JavaScript/Урок 20: Введение в DOM в JavaScript’е
Урок 20: Введение в DOM в JavaScript’е
Автор: написал в рубрике Уроки по JavaScript. 0 Комментариев.

Этот урок станет ключевым в вашем понимании того, как JavaScript взаимодействует с веб-страницами. Мы разберем, что такое Document Object Model, как находить элементы на странице и изменять их содержимое. А еще вас ждут практические задачи и примеры кода

Что такое Document Object Model (DOM)?

DOM это аббревиатура от Document Object Model (Объектная Модель Документа). Это программный интерфейс, который представляет структуру HTML-документа в виде дерева объектов. Каждый элемент страницы — заголовок, абзац, кнопка, изображение — становится узлом этого дерева. Благодаря DOM, JavaScript может «общаться» со страницей: изменять текст, стили, добавлять или удалять элементы.

Как устроено DOM-дерево?

Представьте, что HTML-документ это матрешка. Например:

<!DOCTYPE html>
<html>
  <head>
    <title>Мой сайт</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый сайт.</p>
  </body>
</html>

В DOM это превратится в такую иерархию:

  • Корень дерева это объект document.
  • У документа есть дочерние элементы: <html>.
  • У <html> два ребенка: <head> и <body>.
  • Внутри <head> находится <title>, а в <body> — <h1> и <p>.

Каждый узел дерева это объект со свойствами и методами. Например, у элемента <p> есть свойство textContent (текст внутри тега) или метод remove() (удаление элемента).

Зачем это нужно?

Без DOM JavaScript был бы бесполезен для веб-разработки. Именно благодаря DOM мы можем:

  • Реагировать на действия пользователя (клики, ввод текста).
  • Динамически обновлять контент без перезагрузки страницы.
  • Создавать интерактивные интерфейсы (например, всплывающие окна или анимации).

Поиск элементов на странице

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

1. getElementById

Ищет элемент по его id.
Пример:

<p id="message">Сообщение</p>
const messageElement = document.getElementById('message');
console.log(messageElement.textContent); // Выведет: "Сообщение"

Важно:

  • id должен быть уникальным на странице.
  • Если элемента нет, вернется null.

2. getElementsByClassName

Ищет элементы по классу. Возвращает коллекцию (псевдомассив).

<div class="item">Элемент 1</div>
<div class="item">Элемент 2</div>
const items = document.getElementsByClassName('item');
console.log(items[0].textContent); // Элемент 1

Особенности:

  • Коллекция «живая»: если добавить новый элемент с классом item, он появится в items.
  • Для перебора используйте циклы или преобразуйте в массив через Array.from().

3. getElementsByTagName

Ищет элементы по тегу (например, все <div>).

const divs = document.getElementsByTagName('div');

4. querySelector и querySelectorAll

Самые гибкие методы. Ищут элементы по CSS-селектору.

  • querySelector() возвращает первый найденный элемент.
  • querySelectorAll() возвращает все элементы в виде статичной коллекции.

Примеры:

// Поиск по классу
const button = document.querySelector('.btn');

// Поиск по вложенности
const link = document.querySelector('nav a');

// Поиск всех элементов
const allImages = document.querySelectorAll('img');

Используйте querySelector и querySelectorAll,  они универсальны и поддерживают сложные селекторы.

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

После того как элемент найден, его можно модифицировать. Рассмотрим основные способы.

1. Изменение текста: textContent и innerText

  • textContent возвращает или задает текст внутри элемента, включая скрытые элементы (например, внутри <script>).
  • innerText учитывает только видимый текст и стили (например, не вернет текст, скрытый через display: none).

Пример:

<div id="greeting">Привет, <span style="display: none;">скрытый текст</span>Максим!</div>
const div = document.getElementById('greeting');
console.log(div.textContent); // "Привет, скрытый текстМаксим!"
console.log(div.innerText); // "Привет, Максим!"

div.textContent = 'Новый текст'; // Заменяем содержимое

2. Изменение HTML: innerHTML

Свойство innerHTML позволяет работать с HTML-разметкой внутри элемента.

const list = document.querySelector('ul');
list.innerHTML = '<li>Пункт 1</li><li>Пункт 2</li>';

Осторожно! Использование innerHTML может привести к уязвимостям XSS, если вставляется непроверенный пользовательский ввод. Всегда экранируйте данные.

3. Создание и добавление элементов

Чтобы добавить новый элемент на страницу:

  1. Создайте элемент через document.createElement().
  2. Настройте его свойства.
  3. Добавьте в DOM через методы вроде appendChild().

Пример:

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

// Добавляем в конец body
document.body.appendChild(newParagraph);

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

Удалить элемент можно через метод remove():

const elementToRemove = document.querySelector('.old-element');
elementToRemove.remove();

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

Доступ к стилям элемента осуществляется через свойство style:

const title = document.querySelector('h1');
title.style.color = 'red';
title.style.fontSize = '24px';

Практические задачи

Задача 1: Измените заголовок

Условие:
На странице есть заголовок <h1 id="mainTitle">Старый заголовок</h1>. Замените его текст на «Новый заголовок» с помощью JavaScript.

Решение:

const title = document.getElementById('mainTitle');
title.textContent = 'Новый заголовок';

Задача 2: Добавьте элементы в список

Условие:
В HTML есть пустой <ul id="list"></ul>. Добавьте в него три пункта списка с текстом «Пункт 1», «Пункт 2», «Пункт 3».

Решение:

const list = document.getElementById('list');
for (let i = 1; i <= 3; i++) {
  const li = document.createElement('li');
  li.textContent = `Пункт ${i}`;
  list.appendChild(li);
}

Задача 3: Создайте интерактивную кнопку

Условие:
Создайте кнопку, которая при нажатии меняет цвет фона страницы на случайный.

Решение:

<button id="colorButton">Изменить цвет</button>
const button = document.getElementById('colorButton');
button.addEventListener('click', () => {
  const randomColor = `#${Math.floor(Math.random()*16777215).toString(16)}`;
  document.body.style.backgroundColor = randomColor;
});

Заключение

DOM это мост между вашим JavaScript-кодом и веб-страницей. Сегодня вы научились находить элементы, менять их содержимое и даже создавать новые. Это база для создания интерактивных сайтов!

  • Тренируйтесь на реальных проектах. Сделайте TODO-лист или слайдер.
  • Используйте консоль разработчика (F12) для экспериментов с DOM.

Полный курс по JavaScript для начинающих тут — изучайте JavaScript с нуля