7. DOM манипуляции

JavaScript: Мозги. Урок “DOM манипуляции”

Иллюстрация к уроку DOM манипуляции – это краеугольный камень интерактивных веб-сайтов. Освоив их, вы сможете динамически изменять структуру, стили и контент веб-страницы с помощью JavaScript.

Что такое DOM?

DOM (Document Object Model) – это представление HTML-документа в виде дерева объектов. Каждый HTML-элемент, атрибут и даже текст является узлом (node) в этом дереве. JavaScript позволяет “ходить” по этому дереву, находить нужные элементы и изменять их.

Основы DOM манипуляций

Самые часто используемые методы для работы с DOM:

document.getElementById() - Получение элемента по его ID.
document.querySelector() - Получение первого элемента, соответствующего CSS-селектору.
document.querySelectorAll() - Получение всех элементов, соответствующих CSS-селектору.
element.innerHTML - Получение или изменение HTML-содержимого элемента.
element.textContent - Получение или изменение текстового содержимого элемента.
element.setAttribute() - Установка значения атрибута элемента.
element.getAttribute() - Получение значения атрибута элемента.
element.classList.add() - Добавление CSS-класса к элементу.
element.classList.remove() - Удаление CSS-класса из элемента.
element.appendChild() - Добавление дочернего элемента к элементу.
element.removeChild() - Удаление дочернего элемента из элемента.

Практические примеры

Пример 1: Изменение текста элемента

<!DOCTYPE html>
<html>
<head>
  <title>DOM Manipulation</title>
</head>
<body>
  <p id="myParagraph">Исходный текст.</p>
  <button onclick="changeText()">Изменить текст</button>

  <script>
    function changeText() {
      // Получаем элемент по ID
      const paragraph = document.getElementById("myParagraph");

      // Изменяем текстовое содержимое
      paragraph.textContent = "Новый текст!";
    }
  </script>
</body>
</html>

Пример 2: Добавление нового элемента

<!DOCTYPE html>
<html>
<head>
  <title>DOM Manipulation</title>
</head>
<body>
  <ul id="myList">
    <li>Пункт 1</li>
  </ul>
  <button onclick="addItem()">Добавить пункт</button>

  <script>
    function addItem() {
      // Получаем список
      const list = document.getElementById("myList");

      // Создаем новый элемент списка
      const newItem = document.createElement("li");
      newItem.textContent = "Новый пункт";

      // Добавляем новый пункт в список
      list.appendChild(newItem);
    }
  </script>
</body>
</html>

Пример 3: Изменение CSS класса

<!DOCTYPE html>
<html>
<head>
  <title>DOM Manipulation</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p id="myElement">Этот элемент нужно выделить.</p>
  <button onclick="highlightElement()">Выделить</button>

  <script>
    function highlightElement() {
      const element = document.getElementById("myElement");
      element.classList.add("highlight");
    }
  </script>
</body>
</html>

Жизненный пример

DOM манипуляции активно используются в современных веб-фреймворках, таких как React, Angular и Vue.js. Например, React использует концепцию “Virtual DOM”, чтобы эффективно обновлять пользовательский интерфейс. Когда данные в приложении React меняются, React сравнивает виртуальный DOM с реальным DOM и применяет только необходимые изменения, что значительно повышает производительность. В более простых сценариях, DOM манипуляции используются для создания интерактивных элементов, таких как выпадающие меню, модальные окна, и для динамической фильтрации контента на сайтах электронной коммерции.

Ключевые моменты

DOM представляет собой структуру HTML-документа в виде дерева.
JavaScript предоставляет множество методов для доступа и изменения DOM.
DOM манипуляции позволяют создавать динамические и интерактивные веб-сайты.
Эффективное использование DOM манипуляций важно для оптимизации производительности веб-приложений.
Современные веб-фреймворки активно используют DOM манипуляции для управления пользовательским интерфейсом.