Forstå dokumentobjektmodell (DOM) i detaljer

Vi har alle hørt om DOM, eller Dokumentobjektmodell, som blir nevnt fra tid til annen, relatert til JavaScript. DOM er et ganske viktig konsept i webutvikling. Uten det ville vi ikke kunne dynamisk endre HTML-sider i nettleseren.

Læring og forståelse av DOM gir bedre måter å tilgang, endring og overvåking forskjellige elementer av en HTML-side. Dokumentobjektmodellen kan også hjelpe oss redusere unødvendig økning i eksekveringstiden for scriptet.

Datastruktur trær

Før du snakker om hva DOM er, hvordan det kommer til uttrykk, hvordan det eksisterer, og hva som skjer inni det, vil jeg at du skal vite om trær. Ikke nålet og løvfunnet, men om data struktur tre.

Det er mye lettere å forstå begrepet datastrukturer hvis vi forenkler definisjonen. Jeg vil si, en datastruktur handler om ordne dataene dine. Ja, bare ordne gamle arrangement, som du ville arrangere møblene i huset ditt eller bøkene i en bokhylle eller alle de forskjellige matgruppene du har for et måltid på tallerkenen din for å gjør det meningsfylt for deg.

Selvfølgelig er det ikke alt, det er en datastruktur, men det er ganske mye hvor alt starter. Dette “ordning” er i hjertet av det hele. Det er også ganske viktig i DOM. Men vi snakker ikke om DOM ennå, så la meg styre deg mot a datastruktur som du kanskje er kjent med: arrays.

Arrayer og trær

Arrays har indekser og lengde, de kan være multi-dimensjonale, og har mange flere egenskaper. Like viktig det er å kjenne disse tingene om arrays, la oss ikke bry oss selv med det akkurat nå. For oss er en rekke ganske enkel. Det er når du ordne forskjellige ting i en linje.

På samme måte, når vi tenker på trær, la oss si det handler om sette ting under hverandre, starter med bare én ting øverst.

Nå kan du ta single line ender fra før, snu den oppreist, og fortell meg det “Nå er hver and annen under en annen”. Er det et tre da? Det er.

Avhengig av hva dataene dine er eller hvordan du skal bruke det, er de øverste dataene i treet ditt (kalt rot) kan være noe som er av stor betydning eller noe som bare er der Vedlegg andre elementer under den.

Uansett, gjør det øverste elementet i en tre datastruktur noe veldig viktig. Det gir et sted å begynn å søke etter all informasjon vi ønsker å trekke ut fra treet.

Betydningen av DOM

DOM står for Dokumentobjektmodell. Dokumentet peker på et HTML-dokument (XML) som er representert som et objekt. (I JavaScript kan alt bare bli representert som et objekt!)

Modellen er opprettet av nettleseren som tar et HTML-dokument og lager et objekt som representerer det. Vi kan få tilgang til dette objektet med JavaScript. Og siden vi bruker dette objektet til å manipulere HTML-dokumentet og bygge våre egne applikasjoner, DOM er i utgangspunktet en API.

DOM-treet

I JavaScript-kode er HTML-dokumentet representert som et objekt. Alle dataene som leses fra dette dokumentet er lagres også som objekter, nestet under hverandre (fordi som jeg sa før, i JavaScript kan alt bare bli representert som gjenstander).

Så dette er egentlig det fysiske arrangementet av DOM data i kode: alt er arrangert som gjenstander. Logisk, imidlertid, det er et tre.

DOM-parseren

Hver nettleser programvare har et program kalt DOM Parser som er ansvarlig for parsing et HTML-dokument til DOM.

Nettlesere leser en HTML-side og setter dataene i objekter som utgjør DOM. Informasjonen som finnes i disse JavaScript DOM-objektene er logisk ordnet som et datastruktur-tre kjent som DOM-treet.

Parsing data fra HTML til DOM-treet

Ta en enkel HTML-fil. Den har root element . Det er delelementer er og , hver har mange barnelementer av seg selv.

Så egentlig, nettleseren leser dataene i HTML-dokumentet, noe som ligner på dette:

Og, ordner dem til et DOM-tre som dette:

Representasjonen av hvert HTML-element (og tilhørende innhold) i DOM-treet er kjent som en node. De root node er noden til .

De DOM-grensesnitt i JavaScript kalles dokument (siden det er representasjonen av HTML-dokumentet). Dermed får vi tilgang til DOM-treet i et HTML-dokument gjennom dokument grensesnitt i JavaScript.

Vi kan ikke bare få tilgang, men også manipulere HTML-dokumentet gjennom DOM. Vi kan legge til elementer på en nettside, fjerne og oppdatere dem. Hver gang vi endrer eller oppdaterer noen noder i DOM-treet, blir det reflekterer på nettsiden.

Hvordan noder er utformet

Jeg har tidligere nevnt at alle dataene fra et HTML-dokument er lagret som et objekt i JavaScript. Så, hvordan dataene som er lagret som et objekt, kan logisk ordnes som et tre?

Nodene til et DOM-tre har visse egenskaper eller egenskaper. Nesten hver knute i et tre har en overordnet knutepunkt (noden rett over det), barn noder (noder under det) og søsken (andre noder tilhører samme forelder). Å ha dette familie over, under og rundt en node er det som kvalifiserer det som en del av et tre.

Denne familieinformasjonen til hver node er lagret som egenskaper i objektet som representerer den noden. For eksempel, barn er en egenskap av en node som bærer en liste over barnelementene i den noden og dermed logisk anordner sine barnelementer under noden.

Unngå å overdrive DOM-manipulasjon

Så mye som vi kan finne oppdatering av DOM-nyttig (for å endre en nettside), er det en ting som overdrive det.

Si, du vil oppdatere fargen til a

på en nettside som bruker JavaScript. Det du trenger å gjøre er tilgang til det tilhørende DOM-nodemålet og oppdater fargeegenskapen. Dette bør ikke påvirke resten av treet (de andre noder i treet).

Men, hva hvis du vil fjern en knutepunkt fra et tre eller legg til en til den? Hele treet må kanskje omorganiseres, med noden fjernet eller lagt til treet. Dette er en kostbar jobb. Det tar tid og nettleserressurs å få denne jobben gjort.

For eksempel, la oss si at du vil legg til fem ekstra rader til et bord. For hver rad, når de nye noder er opprettet og lagt til DOM, vil Treet oppdateres hver gang, legger til opptil fem oppdateringer totalt.

Vi kan unngå dette ved å bruke DocumentFragment grensesnitt. Tenk på det som en boks som kunne hold alle fem rader og legges til treet. På denne måten er fem rader lagt til som et enkelt stykke data og ikke en etter en, som fører til bare en oppdatering i treet.

Dette skjer ikke bare når vi fjerner eller legger til elementer, men endre størrelse på et element kan også påvirke andre noder, da det endrede elementet kanskje trenger andre elementer rundt det til juster størrelsen deres. Så de tilsvarende nodene til alle de andre elementene må oppdateres og HTML-elementene blir gjengitt igjen i henhold til de nye reglene.

På samme måte, når utformingen av en nettside som helhet påvirkes, en del eller hele nettsiden kan bli gjengitt. Dette er prosessen er kjent som reflow. For å unngå overdreven reflow sørg for at du ikke forandrer DOM for mye. Endringer i DOM er ikke det eneste som kan forårsake Reflow på en nettside. Avhengig av nettleseren kan andre faktorer også bidra til det.

Innpakning

Wrapping ting opp, er DOM visualisert som et tre består av alle elementene som finnes i et HTML-dokument. Fysisk (så fysisk som alt digitalt kan få), er det en sett med nestede JavaScript-objekter hvilke egenskaper og metoder inneholder informasjonen som gjør det mulig å Organiser dem logisk i et tre.