Leer Wat is het Document Object Model (DOM)? | DOM-Manipulatie voor Interactieve Webontwikkeling

Nu we JavaScript-klassen hebben behandeld, richten we onze aandacht op het Document Object Model (DOM), de interface waarmee we webpagina's kunnen manipuleren. In de volgende sectie wordt onderzocht hoe JavaScript met het DOM samenwerkt om dynamische, interactieve inhoud te creëren.

Beschouw het DOM als een stamboom. Elk element in het document is als een familielid, verbonden door relaties – ouders, kinderen en broers of zussen.

In het DOM worden elementen, attributen en tekst knooppunten genoemd, en deze knooppunten zijn hiërarchisch gerangschikt, net als familieleden in een stamboom. Sommige knooppunten zijn ouders met kinderen, terwijl andere broers of zussen zijn.

De relatie tussen HTML en het DOM

Wanneer een browser een HTML-document laadt, leest deze de HTML-code en bouwt een overeenkomstige DOM-boom. HTML biedt de statische structuur van de webpagina, terwijl het DOM de live, dynamische representatie is die door JavaScript kan worden gemanipuleerd.

HTML definieert de initiële structuur van de stamboom, wie met wie verbonden is, maar is statisch en verandert niet uit zichzelf;
Het DOM is de stamboom in real-time en kan worden aangepast. Nieuwe leden (elementen) kunnen worden toegevoegd of verwijderd, en relaties (ouder-kind, broers of zussen) kunnen door JavaScript worden bijgewerkt.

Bijvoorbeeld:

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

Deze HTML creëert een eenvoudige stamboom met een <html>-knooppunt als ouder, en de <head>- en <body>-knooppunten als kinderen. Binnen de body zijn <h1> en <p> broers en zussen.

Deze structuur is de live, interactieve versie van de HTML in de DOM, waarin JavaScript de relaties tussen knooppunten (familieleden) kan manipuleren.

Hoe JavaScript met de DOM omgaat

JavaScript kan de DOM benaderen en manipuleren om in realtime wijzigingen aan te brengen in de stamboom. Nieuwe leden kunnen worden toegevoegd, bestaande verwijderd of hun informatie aangepast.

Familieleden benaderen: Net zoals je een specifiek persoon in een stamboom kunt vinden, kan JavaScript individuele knooppunten in de DOM benaderen met methoden zoals document.getElementById() of document.querySelector();
Informatie wijzigen: Zodra een familielid is benaderd, kunnen de details worden bijgewerkt. JavaScript kan bijvoorbeeld de tekstinhoud of attributen van een element wijzigen met eigenschappen zoals innerHTML of textContent;
Relaties aanpassen: JavaScript kan ook nieuwe familieleden aan de boom toevoegen of verwijderen. Dit gebeurt door de DOM-structuur te manipuleren met methoden zoals appendChild() of removeChild().

Voorbeeld

Beschouw deze HTML:

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

Met JavaScript kunnen we de tekst van de paragraaf wijzigen, vergelijkbaar met het bijwerken van de naam van een familielid:

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

Na het uitvoeren van de JavaScript-code wordt de familiestamboom (DOM) bijgewerkt en verandert de tekst van de paragraaf van "Hello, World!" naar "Hello, JavaScript!"

index.html

index.js

index.css

Was alles duidelijk?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 1

Vraag AI

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 2.22

Veeg om het menu te tonen