Lære Hvad er Dokumentobjektmodellen (DOM)? | DOM-Manipulation til Interaktiv Webudvikling

Nu hvor vi har gennemgået JavaScript-klasser, skifter vi fokus til Document Object Model (DOM), som er det interface, der gør det muligt at manipulere websider. Det næste afsnit vil undersøge, hvordan JavaScript interagerer med DOM'en for at skabe dynamisk og interaktivt indhold.

Forestil dig DOM'en som et stamtræ. Hvert element i dokumentet svarer til et familiemedlem, forbundet gennem relationer – forældre, børn og søskende.

I DOM'en kaldes elementer, attributter og tekst for noder, og disse noder er arrangeret hierarkisk, ligesom familiemedlemmer i et stamtræ. Nogle noder er forældre med børn, mens andre er søskende.

Forholdet mellem HTML og DOM

Når en browser indlæser et HTML-dokument, læser den HTML-koden og opbygger et tilsvarende DOM-træ. HTML leverer den statiske struktur for websiden, mens DOM'en er den levende, dynamiske repræsentation, som JavaScript kan manipulere.

HTML definerer den oprindelige stamtræsstruktur for, hvem der er forbundet med hvem, men den er statisk og ændrer sig ikke af sig selv;
DOM'en er stamtræet i realtid, og det kan ændres. Nye medlemmer (elementer) kan tilføjes eller fjernes, og relationer (forældre-barn, søskende) kan opdateres af JavaScript.

For example:

<!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>

Denne HTML skaber et grundlæggende stamtræ med en <html> node som forælder, og <head> og <body> noder som dens børn. Inden i body er <h1> og <p> søskende.

Denne struktur er DOM'ens levende, interaktive version af HTML, hvor JavaScript kan manipulere relationerne mellem noder (familiemedlemmer).

Hvordan JavaScript interagerer med DOM'en

JavaScript kan tilgå og manipulere DOM'en for at foretage ændringer i stamtræet i realtid. Det er muligt at tilføje nye medlemmer, fjerne eksisterende eller ændre deres information.

Adgang til familiemedlemmer: Ligesom man kan finde en bestemt person i et stamtræ, kan JavaScript tilgå individuelle noder i DOM'en ved hjælp af metoder som document.getElementById() eller document.querySelector();
Ændring af information: Når et familiemedlem er tilgået, kan deres oplysninger opdateres. For eksempel kan JavaScript ændre tekstindholdet eller attributter for et element ved at bruge egenskaber som innerHTML eller textContent;
Ændring af relationer: JavaScript kan også tilføje nye familiemedlemmer til træet eller fjerne dem. Dette gøres ved at manipulere DOM-strukturen med metoder som appendChild() eller removeChild().

Eksempel

Overvej dette HTML:

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

Ved hjælp af JavaScript kan vi ændre tekstindholdet i paragrafen, ligesom opdatering af navnet på et familiemedlem:

// 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!';

Efter at JavaScript-koden er kørt, opdateres stamtræet (DOM), og teksten i paragrafen ændres fra "Hello, World!" til "Hello, JavaScript!"

index.html

index.js

index.css

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 1

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

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

Stryg for at vise menuen