En introduksjon til DOM

• April 29, 2024

DOM er et forkortelse for Document Object Model. Det er en måte å se på HTML som gjør det mulig for nettstedutviklere å lage funksjoner og manipulere koden på måter som ellers ville være umulige.

Det er tre grunnleggende typer DOM; kjernen DOM, som kan brukes til å definere ethvert dokument uansett type; XML DOM, som brukes med XML-dokumenter, og HTML DOM. Denne siste typen er den viktigste og mest nyttige for HTML-utviklere, så det er DOM denne artikkelen vil utforske.

HTML DOM deler en HTML-side opp i noder. Disse nodene er alle koblet til hverandre, med underordnede noder som stiger fra deres overordnede noder og fra rotnoden øverst, i en tre-lignende layout. Det som gjør DOM-en så viktig og nyttig for HTML-utviklere er at denne definisjonen gjør hver del av siden distinkt og lokaliserer den i forhold til alle andre deler, slik at det er enkelt å designe kode som refererer til den aktuelle delen og bare påvirker den delen. . Dette gjør for eksempel HTML DOM viktig for Javascript-programmering, siden det gir en måte for et Javascript-program å bruke HTML-elementer direkte. Uten DOM er det umulig for et Javascript-program å få tilgang til innholdet på en webside dynamisk. Som et eksempel kan du ved å bruke DOM-metoder skrive et program som endrer teksten i et bestemt HTML-element hvis en spesifikk hendelse oppstår (si, en besøkende klikker på en knapp på siden).

Som du allerede vet, er en HTML-side satt sammen av forskjellige elementer som dette:



Eksempel på HTML-side

Dette er et eksempel på en grunnleggende HTML-side.

Med DOM er hvert element (alt mellom ett sett med koder, for eksempel) en node. Noden kalles rotnoden, og er den mest grunnleggende; den har to underordnede noder, noden og noden. I eksemplet ovenfor er noden barnet til noden og

noden er nodenes barn.

En webutvikler kan bruke og endre DOM ved å bruke visse kommandoer. Disse kommandoene er delt inn i egenskaper (som beskriver en del av HTML-siden) og metoder (som gjør noe med den delen av siden).

For neste informasjon om hvordan du bruker HTML DOM, se neste artikkel, "Arbeide med DOM", som blir lagt ut neste uke.

Video Instruksjoner: Kap. 7.1 DOM-introduksjon (April 2024).