Den skjulte helt af websteder: Forståelse af DOM

"DOM" er et udtryk, der bruges meget i front-end webdesign og udvikling. Det står for "Document Object Model", og det er en grundlæggende del af websteder.

Så vigtig som DOM er, mange mennesker forstår det ikke. Faktisk kan du programmere websteder i årevis uden at lære meget om det. Men efterhånden som front-end-teknologien skrider frem, bliver forståelse af DOM vigtigere.

Forståelse af DOM-kontrakten

I objektorienteret programmering er der en konstruktion kaldet en grænseflade. En grænseflade gør ikke noget alene. I stedet opretter det en kontrakt. Det siger, at alt kan interagere med noget andet, så længe det følger reglerne i interfacekontrakten.

At have en grænseflade lader enhver del af et program interagere med enhver anden del af programmet på en kontrolleret og forudsigelig måde. Interfacet gør det også muligt for en del af et program at arbejde med en hvilken som helst anden del, selvom den ikke ved noget om den del af programmet på den anden side af grænsefladen.

En grænseflade er som en stikkontakt i din væg. Din enhed behøver ikke at vide, hvor strømmen kommer fra, så længe spændingen er korrekt. Transformatoren på hjørnet behøver ikke at vide, hvad den driver. Det skal bare sende elektricitet til den rette spænding til dit hus.

instagram viewer

DOM er et interface lag mellem websiden og koden, der opretter og ændrer den. Når du besøger et websted, ser du, hvordan browseren gengiver DOM for dette websted. Når du skriver HTML, programmerer du faktisk ved hjælp af DOM's API (programmeringsgrænseflade).

DOM-standarden opretholdes af en kaldet organisation World Wide Web Consortiumeller W3C. De har skabt meget detaljeret dokumentation, der definerer DOM standard.

På dette tidspunkt tænker du måske, at de ikke laver et meget godt stykke arbejde. Når alt kommer til alt er der så mange problemer forårsaget af problemer med kompatibilitet på tværs af browsere.

Problemet er ikke med standarden. Det er med browserne selv. Mange browsere har tilføjet funktionalitet til deres DOM-implementering, der ikke overholder W3C-standarderne. Nogle gange bliver denne funktionalitet populær og bliver implementeret i DOM-standarden, hvilket tvinger andre browsere til at indhente.

Et andet problem er, at nogle stadig bruger ældre versioner af browsere, der ikke har den nyeste DOM-standard indbygget. Og nogle gange implementerer browsere ikke standarden korrekt.

Hvordan DOM er struktureret

Du kan tænke på DOM som et træ. Det elementet er bagagerummet, og alle elementerne inde i det er grene. Når du indlejrer HTML-elementer inde i et overordnet element, opretter du faktisk grene ud af den gren. Det rette udtryk for hver gren er "node".

Træstrukturen skaber logiske forhold mellem knudepunkter, som et stamtræ. Hver knude kan have en forælder og forfædre, hvorfra den forgrener sig. De kan have søskende. Og knudepunkterne kan have børn og efterkommere. At tænke i disse vilkår hjælper meget, når du bruger JavaScript og CSS til at interagere med DOM.

Hvordan HTML interagerer med DOM

DOM defineres ved at oprette et dokumentobjekt med dokumentgrænsefladen. Din HTML-kode er den mest direkte måde at oprette et dokument på. HTML giver dig en enkel måde at definere dokumentet uden at skulle traditionel programmering.

Hvis du lige er kommet i gang med HTML, er det her fem tip til at gøre dig fortrolig med det.

5 trin til forståelse af grundlæggende HTML-kode

HTML er rygraden på hver webside. Hvis du er nybegynder, så lad os gennemgå de grundlæggende trin til forståelse af HTML.

HTML er enklere og mere tilgivende end traditionelle programmeringssprog. Det gør interaktion med DOM let for begyndere webdesignere.

Sådan interagerer CSS med DOM

Når din HTML har struktureret DOM-dokumentet, kan CSS style dette dokument. For at gøre det skal det være i stand til at finde de elementer, du vil style. Det gør det på et par måder.

Du kan få adgang til dokumentknudepunkter ved at henvise til elementer efter navn, f.eks og. CSS kan også få adgang til elementerne direkte ved at referere klasse og id navne. Klassestyling bliver anvendt på flere elementer, så du kan style dem alle på samme tid. Omvendt anvender id-styling ændringer på kun et enkelt element.

Du kan også få adgang til stamtræstrukturen med CSS og finjustere adgang for mere kontrol. CSS-vælgere giver dig mulighed for at vælge flere elementer og giver dig en pose tricks til at finde dem. Du kan søge efter børn efter deres herkomst, kombinationer af klasser og meget mere.

Hvordan JavaScript interagerer med DOM

JavaScript har mest kontrol over dokumentet, fordi JavaScript er et faktisk programmeringssprog med objekter, flowkontrol, variabler osv. DOM giver flere grænseflader, der giver JavaScript mulighed for at manipulere dokumentet, elementerne og andre noder.

Relaterede: Hvad er JavaScript?

JavaScript kan tilføje og fjerne noder samt ændre deres stil. Og JavaScript kan se efter begivenheder i dokumentet, som at holde musen over et element, klikke og trykke på tasterne.

JavaScript kan søge i og navigere i dokumenttræet på en meget lignende måde som CSS. Det er i stand til at finde elementer efter id og klasse. Og det kan hente lister over underordnede elementer som arrays.

Fremtiden for webudvikling og DOM

Internettet har ændret sig meget siden de tidlige dage. I de tidlige dage blev JavaScript mest brugt til specialeffekter og enkle datavisninger. De fleste websteder var ikke meget mere end digitale brochurer. AJAX ændrede dog alt det.

AJAX giver websteder mulighed for at opdatere data, der vises fra en server i farten, uden at genindlæse siden. Før AJAX kunne enhver ændring af data kun ses, når siden blev genindlæst, eller brugeren navigerede til en anden side.

Efter AJAX blev webapps mere og mere populære. Internettet er ikke længere en samling af enkle statiske websteder og et par apps med høj funktionalitet, som eBay. Nu er internettet næsten et andet operativsystem, der er fyldt med meget funktionelle apps.

Efterhånden som brugernes forventninger vokser, skal teknologien følge med. JavaScript er ikke det mest kraftfulde eller hurtigste sprog. Det lider også af en håndfuld problemer som fejl med flydende nummer, der gør det mindre ønskeligt for udviklere. Det er her WebAssembly kommer ind.

WebAssembly bringer mange af fordelene ved native kode til browseren, herunder forbedret hastighed og bedre hardwareadgang. Det giver programmører mulighed for at bruge andre sprog til at opbygge websteder som C ++ og Rust.

Men selv med de store forbedringer, som WebAssembly vil medføre, vil DOM stadig være der, hvilket giver en ensartet grænseflade mellem koden og det, der vises i browseren.

Sådan bruges Outlook i mørk tilstand

Reducer øjenbelastningen og øg din batterilevetid ved at skifte Microsoft Outlook til mørk tilstand.

Om forfatteren