Манипулирование DOM с помощью JavaScript

Введение

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

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

По завершении этой лаборатории вы сможете:

• Выбирать элемент из DOM по его ID.
• Изменять содержимое элемента.
• Устанавливать атрибуты элемента.
• Создавать новый элемент.
• Добавлять новый элемент в документ.

Приступим!

Выбор элемента по ID с помощью getElementById

На этом шаге вы научитесь выбирать HTML-элемент по его уникальному ID. Метод document.getElementById() является одним из наиболее распространенных способов доступа к конкретному элементу в DOM.

Сначала найдите файл script.js в файловом проводнике слева в WebIDE. Щелкните по нему, чтобы открыть в редакторе. Файл был создан для вас установочным скриптом.

Теперь добавьте следующий код в script.js. Этот код выберет элемент div с ID main-content и сохранит его в переменной contentDiv. Затем мы выведем этот элемент в консоль, чтобы убедиться, что мы выбрали его правильно.

const contentDiv = document.getElementById("main-content");

console.log(contentDiv);

После добавления кода сохраните файл script.js. Чтобы увидеть результат, нажмите на вкладку "Web 8080" в верхней части интерфейса. Вы не увидите никаких визуальных изменений на самой странице, но сможете увидеть вывод console.log. Для этого откройте инструменты разработчика браузера (обычно это можно сделать, щелкнув правой кнопкой мыши на странице и выбрав "Inspect" (Проверить), затем перейдя на вкладку "Console" (Консоль)). В консоли вы должны увидеть выведенный HTML-элемент div.

Изменение текстового содержимого с помощью innerHTML

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

Продолжайте редактировать файл script.js. Ниже кода, который вы написали на предыдущем шаге, добавьте следующую строку. Это изменит текст внутри выбранного нами div.

const contentDiv = document.getElementById("main-content");

// This line is new
contentDiv.innerHTML = "The content has been changed by JavaScript!";

console.log(contentDiv);

Не забудьте сохранить файл script.js. Теперь вернитесь на вкладку "Web 8080" и обновите страницу. Вы должны увидеть, что текст внутри блока изменился с "This is the original content." на "The content has been changed by JavaScript!".

Установка атрибута методом setAttribute

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

Наш файл index.html содержит ссылку (<a> тег) с ID labex-link. Давайте изменим ее атрибут href, чтобы он указывал на веб-сайт LabEx.

Добавьте следующий код в ваш файл script.js.

// Select the link element
const link = document.getElementById("labex-link");

// Set its href attribute
link.setAttribute("href", "https://labex.io");

Ваш полный файл script.js теперь должен выглядеть так:

const contentDiv = document.getElementById("main-content");
contentDiv.innerHTML = "The content has been changed by JavaScript!";
console.log(contentDiv);

// Select the link element
const link = document.getElementById("labex-link");

// Set its href attribute
link.setAttribute("href", "https://labex.io");

Сохраните файл, переключитесь на вкладку "Web 8080" и обновите страницу. Теперь, если вы наведете курсор на ссылку "LabEx", вы увидите в строке состояния вашего браузера, что она указывает на https://labex.io. Нажатие на нее попытается перейти на эту страницу.

Создание нового элемента с помощью createElement

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

Давайте создадим новый элемент абзаца (<p>). Добавьте следующий код в конец вашего файла script.js.

// Create a new paragraph element
const newParagraph = document.createElement("p");

// Set its content
newParagraph.innerHTML = "This is a new paragraph created with JavaScript.";

// Add a class for styling
newParagraph.className = "new-element";

На данном этапе элемент создан в памяти браузера, но еще не отображается на странице. Мы создали элемент, установили его содержимое с помощью innerHTML и присвоили ему CSS-класс, чтобы он был стилизован в соответствии с нашим файлом style.css. На следующем шаге вы узнаете, как добавить этот новый элемент в документ.

Добавление дочернего элемента с помощью appendChild

На этом заключительном шаге вы добавите элемент, созданный на предыдущем шаге, на веб-страницу. Метод appendChild() добавляет узел (элемент) как последнего дочернего элемента родительского элемента.

Сначала нам нужно выбрать родительский элемент, куда мы хотим поместить наш новый абзац. В нашем файле index.html для этой цели есть div с ID container. Затем мы используем appendChild(), чтобы добавить к нему наш newParagraph.

Добавьте следующий код в конец файла script.js.

// Get the container element
const container = document.getElementById("container");

// Append the new paragraph to the container
container.appendChild(newParagraph);

Ваш полный файл script.js теперь должен содержать весь код из предыдущих шагов. Сохраните файл и обновите вкладку "Web 8080". Теперь вы должны увидеть новый, стилизованный абзац, появившийся под ссылкой на вашей странице.

Поздравляем! Вы успешно манипулировали DOM, чтобы изменить содержимое, установить атрибут, а также динамически создать и отобразить новый элемент.

Резюме

В этой лабораторной работе вы изучили основные методы манипулирования Document Object Model (DOM) с помощью JavaScript. Эти навыки необходимы для создания динамических и интерактивных веб-страниц.

Вы успешно отработали следующие навыки:

• Выбор элементов из DOM с помощью document.getElementById().
• Изменение содержимого элемента с помощью свойства innerHTML.
• Модификация атрибутов элемента с помощью метода setAttribute().
• Создание новых HTML-элементов в памяти с помощью document.createElement().
• Добавление вновь созданных элементов на веб-страницу с помощью appendChild().

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