Lære Hva er dokumentobjektmodellen (DOM)? | DOM-Manipulering for Interaktiv Webutvikling

Nå som vi har gjennomgått JavaScript-klasser, skal vi rette oppmerksomheten mot Document Object Model (DOM), som er grensesnittet som lar oss manipulere nettsider. Neste seksjon vil utforske hvordan JavaScript samhandler med DOM for å skape dynamisk og interaktivt innhold.

Tenk på DOM som et familietre. Hvert element i dokumentet er som et familiemedlem, forbundet gjennom relasjoner – foreldre, barn og søsken.

I DOM kalles elementer, attributter og tekst for noder, og disse nodene er arrangert hierarkisk, akkurat som familiemedlemmer i et familietre. Noen noder er foreldre med barn, mens andre er søsken.

Forholdet mellom HTML og DOM

Når en nettleser laster et HTML-dokument, leser den HTML-koden og bygger et tilsvarende DOM-tre. HTML gir den statiske strukturen til nettsiden, mens DOM er den levende, dynamiske representasjonen som JavaScript kan manipulere.

HTML definerer den opprinnelige familietrestrukturen for hvem som er koblet til hvem, men den er statisk og endres ikke av seg selv;
DOM er familietreet i sanntid, og det kan endres. Nye medlemmer (elementer) kan legges til eller fjernes, og relasjoner (foreldre-barn, søsken) kan oppdateres av 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-en oppretter et grunnleggende familietre med en <html>-node som forelder, og <head>- og <body>-noder som dens barn. Inne i body er <h1> og <p> søsken.

Denne strukturen er DOM-ens levende, interaktive versjon av HTML, hvor JavaScript kan manipulere forholdet mellom noder (familiemedlemmer).

Hvordan JavaScript samhandler med DOM-en

JavaScript kan få tilgang til og manipulere DOM-en for å gjøre endringer i familietreet i sanntid. Det er mulig å legge til nye medlemmer, fjerne eksisterende eller endre informasjonen deres.

Tilgang til familiemedlemmer: På samme måte som man kan finne en bestemt person i et familietre, kan JavaScript få tilgang til individuelle noder i DOM-en ved å bruke metoder som document.getElementById() eller document.querySelector();
Endre informasjon: Når et familiemedlem er funnet, kan detaljene deres oppdateres. For eksempel kan JavaScript endre tekstinnholdet eller attributtene til et element ved å bruke egenskaper som innerHTML eller textContent;
Endre relasjoner: JavaScript kan også legge til nye familiemedlemmer i treet eller fjerne dem. Dette gjøres ved å manipulere DOM-strukturen med metoder som appendChild() eller removeChild().

Eksempel

Vurder denne HTML-en:

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

Ved å bruke JavaScript kan vi endre teksten i paragrafen, på samme måte som å oppdatere navnet til 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!';

Etter at JavaScript-koden har kjørt, blir familietreet (DOM) oppdatert, og teksten i paragrafen endres fra "Hello, World!" til "Hello, JavaScript!"

index.html

index.js

index.css

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 1

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

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

Sveip for å vise menyen