HTML DOM (Document Object Model) er en hierarkisk representasjon av HTML-dokumenter. Den definerer strukturen og egenskapene til elementer på en nettside, og lar JavaScript dynamisk få tilgang til, manipulere og oppdatere innhold, noe som forbedrer interaktivitet og funksjonalitet.

Merk : Det kalles en logisk struktur fordi DOM ikke spesifiserer noe forhold mellom objekter.

Innholdsfortegnelse

• Hvorfor kreves DOM?
• Strukturen til DOM
• Egenskaper til DOM
• Metoder for dokumentobjektmodell
• Hva er ikke DOM?
• Nivåer av DOM:

Hva er DOM?

DOM , eller Dokumentobjektmodell , er et programmeringsgrensesnitt som representerer strukturerte dokumenter som HTML og XML som et tre av gjenstander. Den definerer hvordan du får tilgang til, manipulerer og endrer dokumentelementer ved å bruke skriptspråk som JavaScript.

Så i utgangspunktet er Document Object Model en API som representerer og samhandler med HTML- eller XML-dokumenter.

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

W3C Dom-standarden er delt inn i tre forskjellige deler:

• Kjerne DOM – standardmodell for alle dokumenttyper
• XML DOM – standardmodell for XML-dokumenter
• HTML DOM – standardmodell for HTML-dokumenter

HTML DOM

HTML DOM er en standard objektmodell og programmeringsgrensesnitt for HTML-dokumenter. HTML DOM er en måte å representere nettsiden i en strukturert hierarkisk måte slik at det blir lettere for programmerere og brukere å gli gjennom dokumentet.

gratis vs gratis

Med HTML DOM kan vi enkelt få tilgang til og manipulere tagger, ID-er, klasser, attributter eller elementer i HTML ved å bruke kommandoer eller metoder levert av dokumentobjektet.

Ved å bruke DOM JavaScript får vi tilgang til HTML så vel som CSS på nettsiden og kan også endre oppførselen til HTML-elementene.

Hvorfor er DOM påkrevd?

HTML er vant til struktur nettsidene og Javascript brukes til å legge til oppførsel til våre nettsider. Når en HTML-fil lastes inn i nettleseren, kan JavaScript ikke forstå HTML-dokumentet direkte. Så den tolker og samhandler med Document Object Model (DOM), som er opprettet av nettleseren basert på HTML-dokumentet.

DOM er i utgangspunktet representasjonen av det samme HTML-dokumentet, men i en trelignende struktur sammensatt av objekter. JavaScript kan ikke forstå tags() i HTML-dokument, men kan forstå objekt h1 i DOM.

JavaScript tolker DOM enkelt og bruker det som en bro for å få tilgang til og manipulere elementene. DOM Javascript gir tilgang til hvert av objektene (h1, p, etc) ved å bruke forskjellige funksjoner.

Document Object Model (DOM) er viktig i webutvikling av flere grunner:

• Dynamiske nettsider: Den lar deg lage dynamiske nettsider. Det gjør det mulig for JavaScript å få tilgang til og manipulere sideinnhold, struktur og stil dynamisk, noe som gir interaktive og responsive nettopplevelser, for eksempel å oppdatere innhold uten å laste hele siden på nytt eller svare på brukerhandlinger umiddelbart.
• Interaktivitet: Med DOM kan du svare på brukerhandlinger (som klikk, inndata eller rulling) og endre nettsiden deretter.
• Innholdsoppdateringer: Når du ønsker å oppdatere innholdet uten å oppdatere hele siden, muliggjør DOM målrettede endringer som gjør nettapplikasjonene mer effektive og brukervennlige.
• Kryssnettleserkompatibilitet: Ulike nettlesere kan gjengi HTML og CSS på forskjellige måter. DOM gir en standardisert måte å samhandle med sideelementer på.
• Enkeltsideapplikasjoner (SPA-er): Applikasjoner bygget med rammeverk som React eller Angular, er sterkt avhengige av DOM for effektiv gjengivelse og oppdatering av innhold på en enkelt HTML-side uten å laste hele siden på nytt.

Strukturen til DOM

DOM kan betraktes som et tre eller skog (mer enn ett tre). Begrepet strukturmodell brukes noen ganger for å beskrive den trelignende representasjonen av et dokument.

Hver gren av treet ender i en node, og hver node inneholder objekter Hendelseslyttere kan legges til noder og utløses ved en forekomst av en gitt hendelse. En viktig egenskap ved DOM-strukturmodeller er strukturell isomorfisme : hvis to DOM-implementeringer brukes til å lage en representasjon av det samme dokumentet, vil de lage den samme strukturmodellen, med nøyaktig de samme objektene og relasjonene.

Hvorfor kalles DOM en objektmodell?

sammenligne i streng

Dokumenter er modellert ved hjelp av objekter, og modellen inkluderer ikke bare strukturen til et dokument, men også oppførselen til et dokument og objektene som det er sammensatt av som tag-elementer med attributter i HTML.

Egenskaper til DOM

La oss se egenskapene til dokumentobjektet som kan nås og endres av dokumentobjektet.

Representasjon av DOM

• Vinduobjekt : Window Object er objektet til nettleseren som alltid er øverst i hierarkiet. Det er som et API som brukes til å angi og få tilgang til alle egenskapene og metodene til nettleseren. Den opprettes automatisk av nettleseren.
• Dokumentobjekt: Når et HTML-dokument lastes inn i et vindu, blir det et dokumentobjekt. Dokumentobjektet har ulike egenskaper som refererer til andre objekter som gir tilgang til og modifikasjon av innholdet på nettsiden. Hvis det er behov for å få tilgang til et element på en HTML-side, starter vi alltid med å få tilgang til «dokument»-objektet. Dokumentobjekt er egenskapen til vindusobjektet.
• Skjemaobjekt: Det er representert ved form tagger.
• Koble objekt : Det er representert ved link tagger.
• Ankerobjekt : Det er representert ved a href tagger.
• Skjemakontrollelementer: Skjema kan ha mange kontrollelementer som tekstfelt, knapper, alternativknapper, avmerkingsbokser, etc.

Metoder for dokumentobjekt

DOM tilbyr ulike metoder som lar brukere samhandle med og manipulere dokumentet. Noen vanlige DOM-metoder er:

Eksempel: I dette eksemplet bruker vi HTML-element-ID for å finne DOM HTML-elementet.

    
techcodeview.comh2>
En informatikkportal for nerder. p>
Dette eksemplet illustrerer getElementByIdb>-metoden. p>
p>