Манипуляция элементами DOM с использованием методов JavaScript

Введение

В этом практическом занятии участники изучат мощные методы управления элементами DOM с использованием JavaScript. В этом подробном руководстве показано, как создать структуру HTML-документа, выбрать элементы по их идентификатору, динамически генерировать и добавлять новые элементы, изменять стили с использованием селекторов классов и решать задачи по динамическому созданию элементов.

Участники получат практический опыт в использовании основных методов управления DOM с помощью JavaScript, таких как document.getElementById(), изменение свойства .style, создание элементов с использованием document.createElement() и управление динамическим контентом. Следуя пошаговым инструкциям, участники приобретут навыки по трансформации содержания и интерактивности веб-страницы с использованием основных методов DOM в JavaScript.

Настройка структуры HTML-документа

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

Откройте WebIDE и перейдите в каталог ~/project. Создайте новый файл с именем index.html, щелкнув правой кнопкой мыши в проводнике файлов и выбрав пункт "Новый файл".

Вот базовая структура HTML, которую вы создадите:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>DOM Manipulation Lab</title>
  </head>
  <body>
    <div id="container">
      <h1 id="main-title">Welcome to DOM Manipulation</h1>
      <p class="description">
        This is a practice page for JavaScript DOM methods.
      </p>
      <div id="dynamic-content"></div>
    </div>

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

Разберём основные компоненты:

<!DOCTYPE html> объявляет, что это HTML5-документ
Мы присвоили id главному контейнеру и ключевым элементам
Добавили class к абзацу
Создали пустой div с id="dynamic-content" для дальнейшей обработки
Связали внешний JavaScript-файл script.js

Пример вывода при открытии этого HTML-файла в браузере:

Welcome to DOM Manipulation
This is a practice page for JavaScript DOM methods.

Теперь создайте соответствующий JavaScript-файл script.js в том же каталоге:

// Initial JavaScript file for DOM manipulation
console.log("HTML document is ready for DOM manipulation");

Выбор элементов по ID и изменение стилей

В этом шаге вы узнаете, как выбирать HTML-элементы по их идентификатору и изменять их стили с использованием JavaScript. Откройте файл script.js в WebIDE, который вы создали на предыдущем шаге.

Мы будем использовать метод document.getElementById() для выбора элементов и свойство .style для изменения их внешнего вида. Обновите файл script.js следующим кодом:

// Select elements by ID
const mainTitle = document.getElementById("main-title");
const container = document.getElementById("container");

// Modify styles directly
mainTitle.style.color = "blue";
mainTitle.style.fontSize = "24px";
mainTitle.style.textAlign = "center";

// Modify container styles
container.style.backgroundColor = "#f0f0f0";
container.style.padding = "20px";
container.style.borderRadius = "10px";

Рассмотрим, что делает этот код:

document.getElementById() находит элемент с определенным идентификатором
Свойство .style позволяет непосредственно изменять стиль
Мы изменяем цвет, размер шрифта и выравнивание главного заголовка
Добавляем цвет фона, отступы и радиус скругления углов для контейнера

Пример вывода в браузере:

Главный заголовок будет голубым, выровнен по центру и крупнее
Контейнер будет иметь светло-серый фон с закругленными углами

Для просмотра изменений откройте файл index.html в браузере или используйте предпросмотр в браузере в WebIDE.

Динамическое создание и добавление новых элементов

В этом шаге вы узнаете, как динамически создавать новые HTML-элементы с использованием JavaScript и добавлять их в существующий документ. Откройте файл script.js в WebIDE и добавьте следующий код:

// Select the dynamic content container
const dynamicContent = document.getElementById("dynamic-content");

// Create new elements
const newParagraph = document.createElement("p");
const newButton = document.createElement("button");

// Set content and attributes
newParagraph.textContent = "This paragraph was created dynamically!";
newParagraph.style.color = "green";

newButton.textContent = "Click Me";
newButton.style.backgroundColor = "lightblue";
newButton.style.padding = "10px";

// Append elements to the dynamic content container
dynamicContent.appendChild(newParagraph);
dynamicContent.appendChild(newButton);

// Add an event listener to the button
newButton.addEventListener("click", () => {
  alert("Dynamic button was clicked!");
});

Рассмотрим основные методы:

document.createElement() создает новый HTML-элемент
.textContent задает текст элемента
.appendChild() добавляет новый элемент в DOM
.addEventListener() добавляет интерактивность к элементу

Пример вывода в браузере:

Зеленый абзац с текстом "This paragraph was created dynamically!"
Светло-голубая кнопка с надписью "Click Me"
Нажатие на кнопку вызовет алерт

При открытии файла index.html вы увидите добавленные на страницу новые элементы.

Изменение элементов с использованием селекторов классов

В этом шаге вы узнаете, как выбирать и изменять элементы с использованием селекторов классов в JavaScript. Обновите файл index.html, чтобы включить несколько элементов с одним и тем же классом:

<div id="container">
  <h1 id="main-title">Welcome to DOM Manipulation</h1>
  <p class="description">First description paragraph</p>
  <p class="description">Second description paragraph</p>
  <div id="dynamic-content"></div>
</div>

Теперь измените файл script.js, чтобы он работал с селекторами классов:

// Select all elements with the 'description' class
const descriptionElements = document.getElementsByClassName("description");

// Loop through the elements and modify their styles
for (let element of descriptionElements) {
  element.style.fontStyle = "italic";
  element.style.color = "darkgreen";
  element.style.backgroundColor = "#f0f0f0";
  element.style.padding = "10px";
  element.style.margin = "5px 0";
}

// Alternative method using querySelector
const firstDescription = document.querySelector(".description");
firstDescription.textContent = "Modified first description using querySelector";

Показаны основные методы:

document.getElementsByClassName() возвращает коллекцию элементов
document.querySelector() выбирает первый совпадающий элемент
Использование цикла for...of для перебора элементов
Одновременно изменение стилей нескольких элементов

Пример вывода в браузере:

Два абзаца с курсивным, темно-зеленым текстом
Светло-серый фон для абзацев с описанием
Измененный текст первого описания

При открытии файла index.html вы увидите стилизованные и измененные абзацы с описанием.

Реализация задачи по генерации интерактивных элементов

В этом финальном шаге вы создадите интерактивную задачу, которая позволяет пользователям динамически генерировать элементы. Обновите файл index.html, чтобы включить поле ввода и кнопку:

<div id="container">
  <h2>Dynamic Element Generator</h2>
  <input type="text" id="elementInput" placeholder="Enter element text" />
  <select id="elementType">
    <option value="p">Paragraph</option>
    <option value="h3">Heading</option>
    <option value="div">Div</option>
  </select>
  <button id="generateButton">Generate Element</button>
  <div id="output-container"></div>
</div>

Теперь обновите файл script.js с логикой интерактивной генерации элементов:

// Select key elements
const elementInput = document.getElementById("elementInput");
const elementTypeSelect = document.getElementById("elementType");
const generateButton = document.getElementById("generateButton");
const outputContainer = document.getElementById("output-container");

// Element generation function
function generateElement() {
  // Get input values
  const text = elementInput.value;
  const type = elementTypeSelect.value;

  // Check if input is not empty
  if (text.trim() === "") {
    alert("Please enter some text");
    return;
  }

  // Create new element
  const newElement = document.createElement(type);
  newElement.textContent = text;

  // Style the new element
  newElement.style.margin = "10px 0";
  newElement.style.padding = "10px";
  newElement.style.backgroundColor = getRandomColor();

  // Add a remove button to each generated element
  const removeButton = document.createElement("button");
  removeButton.textContent = "Remove";
  removeButton.style.marginLeft = "10px";
  removeButton.addEventListener("click", () => {
    outputContainer.removeChild(newElement);
  });

  // Append element and remove button
  newElement.appendChild(removeButton);
  outputContainer.appendChild(newElement);

  // Clear input
  elementInput.value = "";
}

// Helper function to generate random color
function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

// Add event listener to generate button
generateButton.addEventListener("click", generateElement);

Основные особенности этой интерактивной задачи:

Динамическое создание элементов на основе ввода пользователя
Возможность выбора типа элемента
Случайный цвет фона для каждого элемента
Возможность удаления отдельных элементов
Проверка ввода

Пример взаимодействия:

Введите "Hello World" в поле ввода
Выберите тип элемента (например, Paragraph)
Нажмите кнопку "Generate Element"
Появляется новый абзац с случайным цветом фона
Нажмите "Remove", чтобы удалить элемент

Резюме

В этом лабе участники получают знания о фундаментальных техниках манипуляции с DOM на JavaScript с помощью структурированного практического подхода. Лабaratorная работа начинается с создания базовой структуры HTML-документа с расстановкой элементов по стратегии, включая уникальные идентификаторы и классы, которые облегчают взаимодействие с JavaScript. Участники создают начальный HTML-файл и соответствующий JavaScript-файл，奠定я основу для динамической манипуляции веб-страницей.

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