Förstå dokumentobjektmodell (DOM) i detaljer

Vi har alla hört talas om DOM, eller Dokumentobjektmodell, som nämns från tid till annan, relaterad till JavaScript. DOM är ett ganska viktigt koncept inom webbutveckling. Utan det skulle vi inte kunna dynamiskt modifiera HTML-sidor i webbläsaren.

Att lära och förstå DOM resulterar i bättre sätt att åtkomst, förändring och övervakning olika delar av en HTML-sida. Dokumentobjektmodellen kan också hjälpa oss minska onödiga ökar i exekveringstiden för manus.

Datastruktur träd

Innan du pratar om vad DOM är, hur det kommer till existens, hur det existerar och vad som händer inuti det vill jag att du ska veta om träd. Inte barrträd och lövskal men om datastruktur träd.

Det är mycket lättare att förstå begreppet datastrukturer om vi förenklar definitionen. Jag skulle vilja säga, en datastruktur handlar om arrangera dina data. Ja, helt enkelt gammalt arrangemang, eftersom du skulle ordna möblerna i ditt hus eller böcker i en bokhylla eller alla olika matgrupper du har för en måltid på din tallrik för att gör det meningsfullt för dig.

Självklart är det inte allt där det finns en datastruktur, men det är ganska mycket där allt börjar. Detta “arrangemang” ligger i hjärtat av allt. Det är också ganska viktigt i DOM. Men vi pratar inte om DOM ännu, så låt mig styra dig mot a datastruktur som du kanske känner till: arrays.

Arrayer och träd

Arrays har index och längd, de kan vara flerdimensionella, och har många fler egenskaper. Så mycket som viktigt är att veta dessa saker om arrays, låt oss inte störa oss själva med det just nu. För oss är en array ganska enkel. Det är när du ordna olika saker i en rad.

På samma sätt, när vi tänker på träd, låt oss säga, det handlar om sätta saker under varandra, börjar med endast en sak på toppen.

Nu kan du ta enstaka ankor från tidigare, vänd den upprätt, och berätta det för mig “nu är varje anka under en annan anka”. Är det då ett träd? Det är.

Beroende på vad dina uppgifter är eller hur du ska använda den, är de översta uppgifterna i ditt träd (kallad rot) kan vara något som är Av stor betydelse eller något som bara finns där bifoga andra element under den.

Hur som helst gör det översta elementet i en träddatastruktur något mycket viktigt. Det ger plats till börja söka efter all information vi vill extrahera från trädet.

Betydelsen av DOM

DOM står för Dokumentobjektmodell. Dokumentet pekar på ett HTML-dokument (XML) vilket är representeras som ett objekt. (I JavaScript kan allting bara representeras som ett objekt!)

Modellen är skapad av webbläsaren som tar ett HTML-dokument och skapar ett objekt som representerar det. Vi kan nå detta objekt med JavaScript. Och eftersom vi använder det här objektet för att manipulera HTML-dokumentet och bygga våra egna applikationer, DOM är i princip en API.

DOM-trädet

I JavaScript-kod är HTML-dokumentet representerad som ett objekt. Alla data som läses från det dokumentet är sparas också som objekt, nestad under varandra (för som jag sa tidigare, i JavaScript kan allting bara representeras som föremål).

Så det här är i grund och botten det fysiska arrangemanget av DOM-data i kod: allt är arrangerad som föremål. Logiskt, dock, det är ett träd.

DOM-parsern

Varje webbläsars programvara har ett program som heter DOM Parser som ansvarar för analysera ett HTML-dokument i DOM.

Webbläsare läser en HTML-sida och vänder dess data till objekt som utgör DOM. Informationen som finns i dessa JavaScript DOM-objekt är ordentligt anordnad som ett datastrukturträd som kallas DOM-trädet.

Analysera data från HTML till DOM-trädet

Ta en enkel HTML-fil. Den har rotelement . Dess subelement är och , Var och en har många barnelement i sig.

Så väsentligen, webbläsaren läser data i HTML-dokumentet, något som liknar detta:

Och, ordnar dem till ett DOM-träd så här:

Representationen av varje HTML-element (och dess tillhörande innehåll) i DOM-trädet är känt som a Nod. De root node är noden till .

De DOM-gränssnitt i JavaScript heter dokumentera (eftersom det är representation av HTML-dokumentet). Således får vi tillgång till DOM-trädet i ett HTML-dokument genom dokumentera gränssnitt i JavaScript.

Vi kan inte bara komma åt, men också manipulera HTML-dokumentet genom DOM. Vi kan lägga till element på en webbsida, ta bort och uppdatera dem. Varje gång vi ändrar eller uppdaterar några noder i DOM-trädet, det reflekterar på webbsidan.

Hur noder är utformade

Jag har tidigare nämnt att varje bit av data från ett HTML-dokument är sparas som ett objekt i JavaScript. Så, hur data som sparas som ett objekt kan logiskt ordnas som ett träd?

Noderna på ett DOM-träd har vissa egenskaper eller egenskaper. Nästan varje nod i ett träd har en moderkod (noden ovanför den), barnnoder (noderna nedanför) och syskon (andra noder som tillhör samma förälder). Har detta familj ovanför, nedanför, och kring en nod är det som kvalificerar det som en del av ett träd.

Denna familjinformation av varje nod är sparas som egenskaper i objektet som representerar den noden. Till exempel, barn är en egenskap av en nod som bär en lista över barnelementen i den noden, vilket således logiskt anordnar sina barnelement under noden.

Undvik att överdriva DOM-manipulation

Så mycket som vi kan hitta uppdatering av DOM-användbar (för att ändra en webbsida) finns det en sak som överdriver det.

Säg att du vill uppdatera färgen på a