Вивчайте Що таке об'єктна модель документа (DOM)? | Маніпулювання DOM для Інтерактивної Веб-Розробки

Тепер, коли ми розглянули класи JavaScript, давайте переключимо нашу увагу на Document Object Model (DOM) — інтерфейс, який дозволяє маніпулювати веб-сторінками. У наступному розділі буде розглянуто, як JavaScript взаємодіє з DOM для створення динамічного, інтерактивного контенту.

Уявіть DOM як родинне дерево. Кожен елемент у документі — це як член родини, пов'язаний відносинами: батьки, діти та брати/сестри.

У DOM елементи, атрибути та текст називаються вузлами, і ці вузли організовані ієрархічно, подібно до членів родини у родинному дереві. Деякі вузли є батьками з дітьми, інші — братами чи сестрами.

Взаємозв'язок між HTML та DOM

Коли браузер завантажує HTML-документ, він зчитує HTML-код і будує відповідне дерево DOM. HTML забезпечує статичну структуру веб-сторінки, тоді як DOM — це жива, динамічна репрезентація, яку може змінювати JavaScript.

HTML визначає початкову структуру родинного дерева, хто з ким пов'язаний, але воно є статичним і не змінюється самостійно;
DOM — це родинне дерево в реальному часі, і його можна змінювати. Нові члени (елементи) можуть додаватися або видалятися, а відносини (батько-дитина, брати/сестри) можуть оновлюватися за допомогою JavaScript.

Наприклад:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple paragraph.</p>
  </body>
</html>

Цей HTML створює базове сімейне дерево з вузлом <html> як батьківським, а вузлами <head> і <body> як дочірніми. Усередині тіла, <h1> і <p> є сусідніми елементами.

Ця структура є живою, інтерактивною версією HTML у DOM, де JavaScript може змінювати взаємозв'язки між вузлами (членами сім'ї).

Як JavaScript взаємодіє з DOM

JavaScript може отримувати доступ до DOM і змінювати його для внесення змін у сімейне дерево в режимі реального часу. Можна додавати нових членів, видаляти існуючих або змінювати їхню інформацію.

Доступ до членів сім'ї: Так само, як можна знайти конкретну особу в сімейному дереві, JavaScript може отримати доступ до окремих вузлів у DOM за допомогою методів, таких як document.getElementById() або document.querySelector();
Зміна інформації: Після доступу до члена сім'ї його дані можна оновити. Наприклад, JavaScript може змінити текстовий вміст або атрибути елемента за допомогою властивостей, таких як innerHTML або textContent;
Модифікація взаємозв'язків: JavaScript також може додавати нових членів до дерева або видаляти їх. Це здійснюється шляхом зміни структури DOM за допомогою методів, таких як appendChild() або removeChild().

Приклад

Розгляньте цей HTML:

<p id="greeting">Hello, World!</p>

За допомогою JavaScript можна змінити текст абзацу, так само як оновити ім'я члена родини:

// Access the family member (DOM element) using its ID
const greetingElement = document.getElementById('greeting');

// Modify the family member's details (DOM content)
greetingElement.textContent = 'Hello, JavaScript!';

Після виконання JavaScript-коду дерево родини (DOM) оновлюється, і текст абзацу змінюється з "Hello, World!" на "Hello, JavaScript!"

index.html

index.js

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 1

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain more about how to access different types of DOM nodes?

What are some common methods for modifying the DOM with JavaScript?

Can you give more examples of how JavaScript can change the structure of a webpage?

Awesome!

Completion rate improved to 2.22

Свайпніть щоб показати меню