Het documentobjectmodel (DOM) in Details

We hebben allemaal gehoord van de DOM, of Document Object Model, dat wordt van tijd tot tijd genoemd, gerelateerd aan JavaScript. DOM is een vrij belangrijk concept in webontwikkeling. Zonder dat zouden we niet kunnen HTML-pagina's dynamisch aanpassen in de browser.

Het leren en begrijpen van de DOM resulteert in betere manieren om openen, wijzigen en bewaken verschillende elementen van een HTML-pagina. Het Document Object Model kan ons ook helpen verminder onnodige verhogingen in script uitvoeringstijd.

Datastructuur bomen

Voordat ik het heb over wat de DOM is, hoe het tot stand komt, hoe het bestaat, en wat erin gebeurt, wil ik dat je weet over bomen. Niet de naald- en bladverliezende soort maar over de data structuur boom.

Het concept van gegevensstructuren is veel eenvoudiger te begrijpen als we de definitie ervan vereenvoudigen. Ik zou zeggen, een datastructuur gaat over het regelen van uw gegevens. Ja, gewoon een oud arrangement, zoals je het meubilair in je huis of boeken in een boekenkast of alle verschillende voedselgroepen die je voor een maaltijd op je bord hebt, zou rangschikken om maak het zinvol voor jou.

Natuurlijk is dat niet alles wat betreft een datastructuur, maar dat is ongeveer waar het allemaal begint. Deze “arrangement” is de kern van alles. Het is ook erg belangrijk in de DOM. Maar we hebben het nog niet over DOM, dus laat me je naar a sturen gegevensstructuur waarmee u bekend bent: arrays.

Arrays en bomen

Arrays hebben index en lengte, ze kunnen zijn multidimensionale, en hebben veel meer kenmerken. Hoe belangrijk het ook is om deze dingen over arrays te weten, laten we ons daar nu niet mee bezig houden. Voor ons is een array vrij eenvoudig. Het is wanneer jij verschillende dingen in een rij regelen.

Evenzo, als we aan bomen denken, laten we zeggen, het gaat over dingen onder elkaar plaatsen, beginnend met slechts één ding bovenaan.

Nu zou je de eenlijnige eenden van vroeger kunnen nemen, draai het rechtop, en vertel me dat “nu is elke eend onder een andere eend”. Is het dan een boom? Het is.

Afhankelijk van wat uw gegevens zijn of hoe u het gaat gebruiken, worden de bovenste gegevens in uw structuur (de wortel) is misschien iets dat is uitermate belangrijk of iets dat alleen daar is sluit andere elementen eronder in.

Hoe dan ook, het bovenste element in een boomgegevensstructuur doet iets heel belangrijks. Het biedt een plaats om begin met zoeken naar informatie die we uit de boom willen halen.

De betekenis van DOM

DOM staat voor Document Object Model. Het document verwijst naar een HTML (XML) -document welke is weergegeven als een object. (In JavaScript kan alles alleen maar als een object worden weergegeven!)

Het model is gemaakt door de browser dat een HTML-document nodig heeft en een object maakt dat het vertegenwoordigt. We kunnen dit object openen met JavaScript. En omdat we dit object gebruiken om het HTML-document te manipuleren en onze eigen applicaties te bouwen, DOM is eigenlijk een API.

De DOM-boom

In JavaScript-code is het HTML-document weergegeven als een object. Alle gegevens die uit dat document worden gelezen zijn ook opgeslagen als objecten, genest onder elkaar (want zoals ik al eerder zei, in JavaScript kan alles alleen maar als een object worden weergegeven).

Dit is dus eigenlijk de fysieke ordening van DOM-gegevens in code: alles is gerangschikt als objecten. Logisch echter, het is een boom.

De DOM-parser

Elke browsersoftware heeft een programma genaamd DOM Parser dat is verantwoordelijk voor parsing een HTML-document in DOM.

Browsers lezen een HTML-pagina en veranderen de gegevens in objecten die deel uitmaken van de DOM. De informatie die aanwezig is in deze JavaScript DOM-objecten is logisch gerangschikt als een gegevensstructuurboom die bekend staat als de DOM-structuur.

Gegevens uit HTML naar de DOM-structuur parseren

Neem een eenvoudig HTML-bestand. Het heeft de wortelelement . Haar subelementen zijn en , elk heeft veel eigen kinderelementen.

Dus in wezen de browser leest de gegevens in het HTML-document, zoiets als dit:

En, regelt ze in een DOM-boom zoals dit:

De weergave van elk HTML-element (en de bijbehorende inhoud) in de DOM-structuur staat bekend als a Knooppunt. De root-knooppunt is de knoop van .

De DOM-interface in JavaScript wordt genoemd document (aangezien het de weergave van het HTML-document is). Zo hebben we toegang tot de DOM-structuur van een HTML-document door het document interface in JavaScript.

We kunnen niet alleen toegang krijgen, maar ook manipuleren het HTML-document via de DOM. We kunnen elementen aan een webpagina toevoegen, verwijderen en bijwerken. Telkens wanneer we knooppunten in de DOM-structuur wijzigen of wijzigen, is dit het geval reflecteert op de webpagina.

Hoe nodes zijn ontworpen

Ik heb al eerder gezegd dat elk stukje gegevens uit een HTML-document dat is opgeslagen als een object in JavaScript. Dus hoe de gegevens die als een object zijn opgeslagen, logisch als een boom kunnen worden gerangschikt?

De knooppunten van een DOM-boom hebben bepaalde kenmerken of eigenschappen. Bijna elke knoop in een boom heeft een bovenliggend knooppunt (het knooppunt er vlak boven), kindknooppunten (de knooppunten eronder) en broers en zussen (andere knooppunten die bij dezelfde ouder horen). Dit hebben familie boven, onder en rond een knooppunt is wat het als een kwalificeert deel van een boom.

Deze familie-informatie van elk knooppunt is opgeslagen als eigenschappen in het object dat dat knooppunt vertegenwoordigt. Bijvoorbeeld, kinderen is een eigenschap van een knooppunt dat een lijst met onderliggende elementen van dat knooppunt bevat, waardoor de onderliggende elementen logisch onder het knooppunt worden gerangschikt.

Vermijd overdreven DOM-manipulatie

Zoveel als we misschien het updaten van de DOM nuttig vinden (om een webpagina aan te passen), is er zoiets als overdrijven.

Stel dat u de kleur van a wilt bijwerken

op een webpagina met JavaScript. Wat je moet doen is toegang tot het bijbehorende DOM-knooppuntobject en werk de kleureigenschap bij. Dit zou de rest van de boom (de andere knopen in de boom) niet moeten beïnvloeden.

Maar wat als je dat wilt verwijder een knooppunt uit een boom of voeg er een toe? De hele boom moet misschien worden herschikt, met het knooppunt verwijderd of toegevoegd aan de boom. Dit is een kostbare klus. Het kost tijd en browser-middelen om deze klus te klaren.

Stel bijvoorbeeld dat u dat wilt voeg vijf extra rijen toe aan een tabel. Voor elke rij, wanneer de nieuwe knooppunten worden gemaakt en toegevoegd aan de DOM, de boom wordt elke keer bijgewerkt, in totaal maximaal vijf updates toevoegen.

We kunnen dit voorkomen door de DocumentFragment interface. Zie het als een doos die zou kunnen houd alle vijf rijen vast en worden toegevoegd aan de boom. Op deze manier zijn de vijf rijen toegevoegd als een enkel stuk gegevens en niet één voor één, wat leidt tot slechts één update in de boom.

Dit gebeurt niet alleen wanneer we elementen verwijderen of toevoegen, maar het formaat van een element wijzigen kan ook van invloed zijn op andere knooppunten, omdat het aangepaste element wellicht andere elementen eromheen nodig heeft pas hun grootte aan. De corresponderende knooppunten van alle andere elementen moeten dus worden bijgewerkt en de HTML-elementen worden opnieuw weergegeven volgens de nieuwe regels.

Evenzo, wanneer de lay-out van een webpagina als geheel wordt beïnvloed, een deel of de hele webpagina kan opnieuw worden weergegeven. Dit proces is bekend als reflow. Om te vermijd overmatige reflow zorg ervoor dat je de DOM niet te veel verandert. Veranderingen in de DOM zijn niet het enige dat Reflow op een webpagina kan veroorzaken. Afhankelijk van de browser kunnen ook andere factoren hieraan bijdragen.

Afsluiten

De dingen inpakken, is de DOM gevisualiseerd als een boom samengesteld uit alle elementen gevonden in een HTML-document. Fysiek (zo fysiek als alles wat digitaal kan krijgen), is het een verzameling van geneste JavaScript-objecten van welke eigenschappen en methoden de informatie behouden die dit mogelijk maakt logisch in een boom plaatsen.