Forståelse af dokumentobjektmodel (DOM) i detaljer

Vi har alle hørt om DOM, eller Dokumentobjektmodel, der bliver nævnt fra tid til anden, relateret til JavaScript. DOM er et ret vigtigt koncept inden for webudvikling. Uden det ville vi ikke kunne dynamisk ændre HTML-sider i browseren.

At lære og forstå DOM'en resulterer i bedre måder at adgang, ændring og overvågning forskellige elementer på en HTML-side. Dokumentobjektmodellen kan også hjælpe os reducere unødvendige stigninger i script execution time.

Datastruktur træer

Før du taler om, hvad DOM er, hvordan det kommer til udtryk, hvordan det eksisterer, og hvad der sker indenfor det, vil jeg have dig at vide om træer. Ikke nåletræ og løvfældende slags men om data struktur træ.

Det er meget nemmere at forstå begrebet datastrukturer, hvis vi forenkler definitionen. Jeg vil sige, at en datastruktur handler om arrangere dine data. Ja, bare almindeligt gammelt arrangement, som du ville arrangere møblerne i dit hus eller bøger i en bogreol eller alle de forskellige fødevaregrupper du har til et måltid på din tallerken for at gør det meningsfuldt for dig.

Selvfølgelig er det ikke alt, der er en datastruktur, men det er temmelig meget, hvor det hele starter. Dette “arrangement” er kernen i det hele. Det er også meget vigtigt i DOM. Men vi taler ikke om DOM endnu, så lad mig styre dig mod a datastruktur, som du måske er bekendt med: arrays.

Arrays & trees

Arrays har indekser og længde, de kan være flerdimensionelle, og har mange flere egenskaber. Det er lige så vigtigt at kende disse ting om arrays, lad os ikke forstyrre os lige nu. For os er en matrix ret simpel. Det er når du arrangere forskellige ting i en linje.

På samme måde, når vi tænker på træer, lad os sige, det handler om sætter ting under hinanden, starter med kun én ting øverst.

Nu kan du tage single-line-ænderne fra før, drej den oprejst, og fortæl mig det “nu er hver and under en anden and”. Er det da et træ? det er.

Afhængigt af, hvad dine data er, eller hvordan du bruger det, er de øverste data i dit træ (kaldet rod) kan være noget der er af stor betydning eller noget der kun er der vedlægge andre elementer under den.

Uanset hvad det øverste element i en trædatastruktur gør noget meget vigtigt. Det giver et sted at start med at søge efter enhver information, vi ønsker at udtrække fra træet.

Betydningen af DOM

DOM står for Dokumentobjektmodel. Dokumentet peger på et HTML (XML) dokument som er repræsenteret som et objekt. (I JavaScript kan alting kun blive repræsenteret som et objekt!)

Modellen er oprettet af browseren der tager et HTML-dokument og skaber et objekt, der repræsenterer det. Vi kan få adgang til dette objekt med JavaScript. Og da vi bruger dette objekt til at manipulere HTML-dokumentet og opbygge vores egne applikationer, DOM er stort set en API.

DOM-træet

I JavaScript-kode er HTML-dokumentet repræsenteret som et objekt. Alle data læst fra det pågældende dokument er også gemt som objekter, indlejret under hinanden (for som jeg sagde tidligere, i JavaScript kan alting kun blive repræsenteret som objekter).

Så dette er grundlæggende det fysiske arrangement af DOM data i kode: alt er arrangeret som objekter. Logisk set dog, det er et træ.

DOM Parseren

Hver browser software har et program kaldet DOM Parser det er ansvarlig for parsing et HTML-dokument til DOM.

Browsere læser en HTML-side og omdanner dens data til objekter, der udgør DOM. Oplysningerne i disse JavaScript DOM objekter er logisk indrettet som et datastruktur træ kendt som DOM træet.

Parsering af data fra HTML til DOM-træet

Tag en simpel HTML-fil. Det har den root element . dens delelementer er og , hver har mange egne barnelementer.

Så væsentligt, browseren læser dataene i HTML-dokumentet, noget der ligner dette:

Og, arrangerer dem i et DOM-træ sådan her:

Repræsentationen af hvert HTML-element (og dets tilhørende indhold) i DOM-træet er kendt som en Node. Det root node er noden til .

Det DOM interface i JavaScript hedder dokument (da det repræsenterer HTML-dokumentet). Således får vi adgang til DOM-træet i et HTML-dokument gennem dokument grænseflade i JavaScript.

Vi kan ikke kun få adgang, men også manipulere HTML-dokumentet gennem DOM. Vi kan tilføje elementer til en webside, fjerne og opdatere dem. Hver gang vi ændrer eller opdaterer nogen noder i DOM-træet, er det afspejler på websiden.

Hvordan knuder er designet

Jeg har tidligere nævnt, at hvert stykke data fra et HTML-dokument er gemt som et objekt i JavaScript. Så hvordan kan de data, der gemmes som et objekt, logisk arrangeres som et træ?

Nødderne på et DOM-træ har visse egenskaber eller egenskaber. Næsten hver knude i et træ har en forælder noden (knuden højre over det), barn noder (knuderne under det) og søskende (andre knuder tilhørende samme forælder). At have dette familie ovenfor, nedenfor, og omkring en node er det, der kvalificerer det som en del af et træ.

Denne familieinformation af hver knude er gemt som egenskaber i objektet, der repræsenterer det pågældende knudepunkt. For eksempel, børn er en egenskab af en knude, der bærer en liste over barnets elementer i den knude, således logisk arrangere sine barnelementer under knuden.

Undgå at overdrive DOM-manipulation

Så meget som vi kan finde opdatering af DOM'et nyttigt (for at ændre en webside), er der sådan en ting som overdrive det.

Sig, du vil opdatere farven på a

på en webside ved hjælp af JavaScript. Hvad du skal gøre er adgang til dens tilsvarende DOM-knudeobjekt og opdater farve egenskaben. Dette bør ikke påvirke resten af træet (de andre knuder i træet).

Men hvad hvis du vil fjern en knude fra et træ eller tilføj en til den? Hele træet må muligvis omarrangeres, med knuden fjernet eller tilføjet til træet. Dette er et dyrt job. Det tager tid og browser ressource at få dette job gjort.

Lad os sige, at du vil Tilføj fem ekstra rækker til et bord. For hver række, når de nye noder oprettes og tilføjes til DOM, træet opdateres hver gang, Tilføjelse af op til fem opdateringer i alt.

Vi kan undgå dette ved at bruge DocumentFragment grænseflade. Tænk på det som en boks, der kunne hold alle fem rækker og tilføjes til træet. På denne måde er de fem rækker tilføjet som et enkelt stykke data og ikke en efter en, der fører til kun en opdatering i træet.

Dette sker ikke kun, når vi fjerner eller tilføjer elementer, men Ændring af et element kan også påvirke andre knudepunkter, da det ændrede element muligvis kan have andre elementer omkring det juster deres størrelse. Derfor skal de tilsvarende knudepunkter for alle de andre elementer opdateres, og HTML-elementerne vil blive gengivet igen i henhold til de nye regler.

Ligeledes, når layoutet af en webside som helhed påvirkes, en del eller hele websiden kan blive genudgivet. Dette er en proces, der er kendt som Omløb. For at undgå overdreven reflow sørg for at du ikke ændrer DOM for meget. Ændringer i DOM er ikke det eneste, der kan forårsage Reflow på en webside. Afhængigt af browseren kan andre faktorer også bidrage til det.

Afslutter

Indpakning af ting er DOM'en visualiseret som et træ består af alle de elementer, der findes i et HTML-dokument. Fysisk (så fysisk som alt digitalt kan få) er det en sæt indlejrede JavaScript-objekter hvilke egenskaber og metoder indeholder de oplysninger, der gør det muligt at Logisk arrangere dem i et træ.