Динамическое изменение страницы html: перечень способов

Содержание статьи

Введение в тему «Динамическое изменение страницы»

В современном мире интернета, где взаимодействие с пользователем является ключом к успешному веб-сайту, «динамическое изменение страницы HTML» играет важнейшую роль. Данная статья предназначена для разъяснения, как и зачем происходит динамическое изменение HTML.

Основные понятия по теме статьи

«Динамическое изменение страницы HTML» – это процесс, когда содержимое веб-страницы изменяется без необходимости перезагрузки страницы. Это противоположно статической странице, которая не меняется после загрузки, и все изменения требуют обновления страницы.

Использование JavaScript для динамического изменения страниц

JavaScript является основным языком для динамического изменения страницы HTML. При помощи объектной модели документа (DOM), JavaScript может легко читать и изменять содержимое и структуру веб-страницы. Примером может служить динамическое добавление элементов списка или изменение атрибутов тегов.

Использование библиотек и фреймворков для динамического изменения HTML

Популярные библиотеки и фреймворки, такие как React, Vue и Angular, предлагают мощные средства для динамического изменения страницы HTML. Они обеспечивают гибкость и масштабируемость, позволяя создавать сложные веб-приложения с большим объемом динамического контента.

Практический пример динамического изменения страницы HTML

Рассмотрим создание простого веб-приложения, которое позволяет пользователям добавлять и удалять элементы списка. При помощи JavaScript и его DOM API, мы можем обеспечить динамическое изменение HTML страницы, отслеживая действия пользователя и меняя содержимое страницы без ее перезагрузки.

Продвинутые методы динамического изменения HTML

Технологии, такие как AJAX и Fetch API, позволяют выполнять асинхронные запросы к серверу и получать или отправлять данные без необходимости перезагружать страницу. Это открывает новые горизонты для динамического изменения страницы HTML, поскольку данные могут быть обновлены в реальном времени без вмешательства пользователя.

Преимущества и недостатки динамического изменения HTML

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

Практический пример реализации динамического изменения кода страницы

Сначала создадим структуру HTML:

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">

  <title>Пример динамического изменения HTML</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <section>
    <div class="wrapper flex-center">
      <h2 class="title">Пример динамического списка на js</h2>
      <div class="group">
        <input class="custom-input" id="listInput" type="text" placeholder="Введите элемент списка">
        <button class="button" id="addButton">Добавить</button>
      </div>
      <ol class="custom-list" id="dynamicList">
        <li>Вынести мусор</li>
        <li>Купить хлеб и сахар</li>
        <li>Заехать на работу за зарплатой</li>
        <li>Покормить кота</li>
        <!-- тут будут новые пункты  -->
      </ol>
    </div>
  </section>


  <script src="script.js"></script>
</body>

</html>

Затем добавим JavaScript код в файл script.js:

// Функция для добавления кнопки удаления к элементу списка
var addDeleteButton = function(listItem) {
  var deleteButton = document.createElement('button');
  deleteButton.textContent = 'Удалить';

  deleteButton.addEventListener('click', function() {
      listItem.parentElement.removeChild(listItem);
  });

  listItem.appendChild(deleteButton);
};

// Определение обработчика событий
var handleNewItem = function() {
  var listInput = document.getElementById('listInput');
  var dynamicList = document.getElementById('dynamicList');

  var newListItem = document.createElement('li');
  newListItem.textContent = listInput.value;

  // Добавляем кнопку удаления к новому элементу списка
  addDeleteButton(newListItem);

  dynamicList.appendChild(newListItem);
  
  listInput.value = ''; // очистить поле ввода
};

document.getElementById('addButton').addEventListener('click', handleNewItem);

document.getElementById('listInput').addEventListener('keydown', function(event) {
  if (event.keyCode === 13) {
      handleNewItem();
  }
});

// Добавляем кнопки удаления к уже существующим элементам списка
var existingListItems = document.querySelectorAll('#dynamicList li');
existingListItems.forEach(addDeleteButton);

В этом примере при нажатии на кнопку «Добавить» создается новый элемент списка с текстом, введенным в поле ввода. Каждый элемент списка также содержит кнопку «Удалить», которая при нажатии удаляет соответствующий элемент списка.

Далее идёт детальный разбор JS-кода

// Функция для добавления кнопки удаления к элементу списка
var addDeleteButton = function(listItem) {
  var deleteButton = document.createElement('button');
  deleteButton.textContent = 'Удалить';

  deleteButton.addEventListener('click', function() {
      listItem.parentElement.removeChild(listItem);
  });

  listItem.appendChild(deleteButton);
};

Этот блок кода создает функцию addDeleteButton, которая добавляет кнопку удаления к переданному ей элементу списка. document.createElement('button') создает новый элемент кнопки, deleteButton.textContent = 'Удалить' задает текст на кнопке. Затем добавляется слушатель событий, который реагирует на клик по кнопке, удаляя родительский элемент (элемент списка) от его родителя. И в конце кнопка добавляется в элемент списка.

// Определение обработчика событий
var handleNewItem = function() {
  var listInput = document.getElementById('listInput');
  var dynamicList = document.getElementById('dynamicList');

  var newListItem = document.createElement('li');
  newListItem.textContent = listInput.value;

  // Добавляем кнопку удаления к новому элементу списка
  addDeleteButton(newListItem);

  dynamicList.appendChild(newListItem);
  
  listInput.value = ''; // очистить поле ввода
};

document.getElementById('addButton').addEventListener('click', handleNewItem);

В этом блоке кода определяется функция handleNewItem, которая создает новый элемент списка, берет текст из элемента ввода с ID listInput, добавляет к нему кнопку удаления, затем добавляет этот новый элемент списка в динамический список с ID dynamicList. После чего очищает поле ввода. Эта функция добавляется как слушатель событий на кнопку добавления элемента в список с ID addButton.

document.getElementById('listInput').addEventListener('keydown', function(event) {
  if (event.keyCode === 13) {
      handleNewItem();
  }
});

Этот блок кода добавляет слушатель события keydown (нажатие клавиши) к элементу ввода с ID listInput. Если код клавиши равен 13 (это клавиша Enter), то вызывается функция handleNewItem(), добавляющая новый элемент в список.

// Добавляем кнопки удаления к уже существующим элементам списка
var existingListItems = document.querySelectorAll('#dynamicList li');
existingListItems.forEach(addDeleteButton);

Этот последний блок кода ищет все текущие элементы списка в динамическом списке ('#dynamicList li') и добавляет каждому из них кнопку удаления, используя функцию addDeleteButton.

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

Видео с демонстрацией, пояснениями и примером кода

Исходники из видео

Исходники из видео можно посмотреть и скачать тут: ссылка на репозиторий проекта.

Заключение по теме «Динамическое изменение страницы»

Динамическое изменение страницы HTML стало неотъемлемым элементом современной веб-разработки. В то время как это требует определенных навыков и понимания технологий, внедрение динамического изменения HTML может значительно улучшить взаимодействие пользователя с вашим веб-сайтом.