HTML DOM (Document Object Model) er en hierarkisk repræsentation af HTML-dokumenter. Den definerer strukturen og egenskaberne af elementer på en webside, hvilket gør det muligt for JavaScript dynamisk at få adgang til, manipulere og opdatere indhold, hvilket forbedrer interaktivitet og funktionalitet.

Bemærk : Det kaldes en logisk struktur, fordi DOM ikke angiver nogen relation mellem objekter.

Indholdsfortegnelse

• Hvorfor DOM er påkrævet?
• Struktur af DOM
• Egenskaber for DOM
• Metoder til dokumentobjektmodel
• Hvad er DOM ikke?
• Niveauer af DOM:

Hvad er DOM?

DOM , eller Dokumentobjektmodel , er en programmeringsgrænseflade, der repræsenterer strukturerede dokumenter som f.eks HTML og XML som et træ af objekter. Den definerer, hvordan man får adgang til, manipulerer og ændrer dokumentelementer ved hjælp af scriptsprog som JavaScript.

Så grundlæggende er Document Object Model en API der repræsenterer og interagerer med HTML- eller XML-dokumenter.

DOM er en W3C (World Wide Web Consortium) standard og den definerer en standard for adgang til dokumenter.

W3C Dom-standarden er opdelt i tre forskellige dele:

• Kerne DOM – standardmodel til alle dokumenttyper
• XML DOM – standardmodel for XML-dokumenter
• HTML DOM – standardmodel til HTML-dokumenter

HTML DOM

HTML DOM er en standard objektmodel og programmeringsgrænseflade til HTML-dokumenter. HTML DOM er en måde at repræsentere websiden i en struktureret hierarkisk måde så det bliver nemmere for programmører og brugere at glide gennem dokumentet.

multiplekser

Med HTML DOM kan vi nemt få adgang til og manipulere tags, ID'er, klasser, attributter eller elementer af HTML ved hjælp af kommandoer eller metoder leveret af dokumentobjektet.

Ved at bruge DOM JavaScript får vi adgang til HTML såvel som CSS på websiden og kan også ændre adfærden af ​​HTML-elementerne.

Hvorfor er DOM påkrævet?

HTML er vant til struktur websiderne og Javascript bruges til at tilføje opførsel til vores websider. Når en HTML-fil indlæses i browseren, kan JavaScript ikke forstå HTML-dokumentet direkte. Så det fortolker og interagerer med Document Object Model (DOM), som er skabt af browseren baseret på HTML-dokumentet.

DOM er dybest set repræsentationen af ​​det samme HTML-dokument, men i en trælignende struktur sammensat af objekter. JavaScript kan ikke forstå tags() i HTML-dokument, men kan forstå objekt h1 i DOM.

JavaScript fortolker DOM nemt og bruger det som en bro til at få adgang til og manipulere elementerne. DOM Javascript giver adgang til hvert af objekterne (h1, p, osv.) ved at bruge forskellige funktioner.

Document Object Model (DOM) er essentiel i webudvikling af flere årsager:

• Dynamiske websider: Det giver dig mulighed for at oprette dynamiske websider. Det gør det muligt for JavaScript at få adgang til og manipulere sideindhold, struktur og stil dynamisk, hvilket giver interaktive og responsive weboplevelser, såsom opdatering af indhold uden at genindlæse hele siden eller reagere på brugerhandlinger med det samme.
• Interaktivitet: Med DOM kan du reagere på brugerhandlinger (såsom klik, input eller ruller) og ændre websiden i overensstemmelse hermed.
• Indholdsopdateringer: Når du vil opdatere indholdet uden at opdatere hele siden, muliggør DOM målrettede ændringer, der gør webapplikationerne mere effektive og brugervenlige.
• Cross-Browser-kompatibilitet: Forskellige browsere kan gengive HTML og CSS på forskellige måder. DOM giver en standardiseret måde at interagere med sideelementer på.
• Single-Page Applications (SPA'er): Applikationer bygget med rammer såsom React eller Angular, er stærkt afhængige af DOM for effektiv gengivelse og opdatering af indhold på en enkelt HTML-side uden at genindlæse hele siden.

Struktur af DOM

DOM kan opfattes som et træ eller en skov (mere end ét træ). Begrebet strukturmodel bruges nogle gange til at beskrive den trælignende repræsentation af et dokument.

Hver gren af ​​træet ender i en node, og hver node indeholder objekter Hændelseslyttere kan tilføjes til noder og udløses ved en forekomst af en given hændelse. En vigtig egenskab ved DOM-strukturmodeller er strukturel isomorfi : hvis to DOM-implementeringer bruges til at skabe en repræsentation af det samme dokument, vil de skabe den samme strukturmodel med præcis de samme objekter og relationer.

Hvorfor kaldes DOM en objektmodel?

dato til streng

Dokumenter modelleres ved hjælp af objekter, og modellen inkluderer ikke kun strukturen af ​​et dokument, men også opførselen af ​​et dokument og de objekter, som det er sammensat af som tag-elementer med attributter i HTML.

Egenskaber for DOM

Lad os se egenskaberne for dokumentobjektet, som kan tilgås og ændres af dokumentobjektet.

Repræsentation af DOM

• Vinduesobjekt : Window Object er objektet i browseren, som altid er øverst i hierarkiet. Det er som en API, der bruges til at indstille og få adgang til alle browserens egenskaber og metoder. Den oprettes automatisk af browseren.
• Dokumentobjekt: Når et HTML-dokument indlæses i et vindue, bliver det et dokumentobjekt. 'Dokument'-objektet har forskellige egenskaber, der refererer til andre objekter, som giver adgang til og ændring af indholdet på websiden. Hvis der er behov for at få adgang til et hvilket som helst element på en HTML-side, starter vi altid med at få adgang til 'dokument'-objektet. Dokumentobjekt er egenskab for vinduesobjekt.
• Formularobjekt: Det er repræsenteret ved form tags.
• Link objekt : Det er repræsenteret ved link tags.
• Ankerobjekt : Det er repræsenteret ved a href tags.
• Formularkontrolelementer: Form kan have mange kontrolelementer såsom tekstfelter, knapper, alternativknapper, afkrydsningsfelter osv.

Metoder til dokumentobjekt

DOM giver forskellige metoder, der giver brugerne mulighed for at interagere med og manipulere dokumentet. Nogle almindeligt anvendte DOM-metoder er:

Eksempel: I dette eksempel bruger vi HTML-element-id til at finde DOM HTML-elementet.

    
techcodeview.comh2>
En datalogiportal for nørder. p>
Dette eksempel illustrerer getElementByIdb> metode. p>
p>