Den skjulte helten av nettsteder: Forstå DOM

"DOM" er et begrep som blir brukt mye i front-end webdesign og utvikling. Det står for "Document Object Model", og det er en grunnleggende del av nettsteder.

Så viktig som DOM er, mange mennesker forstår det ikke. Faktisk kan du programmere nettsteder i årevis uten å lære mye om det. Men etter hvert som front-end-teknologien utvikler seg, blir forståelse av DOM viktigere.

Forstå DOM-kontrakten

I objektorientert programmering er det en konstruksjon som kalles et grensesnitt. Et grensesnitt gjør ikke noe alene. I stedet skaper det en kontrakt. Det står at alt kan samhandle med noe annet, så lenge det følger reglene i grensesnittkontrakten.

Å ha et grensesnitt lar enhver del av et program samhandle med en hvilken som helst annen del av programmet på en kontrollert og forutsigbar måte. Grensesnittet gjør det også mulig for en del av et program å jobbe med en hvilken som helst annen del, selv om den ikke vet noe om den delen av programmet på den andre siden av grensesnittet.

Et grensesnitt er som et stikkontakt i veggen din. Enheten din trenger ikke å vite hvor strømmen kommer fra så lenge spenningen er riktig. Transformatoren på hjørnet trenger ikke å vite hva den driver. Det trenger bare å sende strøm til riktig spenning til huset ditt.

instagram viewer

DOM er et grensesnittlag mellom websiden og koden som oppretter og endrer den. Når du besøker et nettsted, ser du hvordan nettleseren gjengir DOM for nettstedet. Når du skriver HTML, programmerer du faktisk ved hjelp av DOMs API (programmeringsgrensesnitt).

DOM-standarden opprettholdes av en organisasjon som heter World Wide Web Consortium, eller W3C. De har skapt svært detaljert dokumentasjon som definerer DOM standard.

På dette punktet tenker du kanskje at de ikke gjør en veldig god jobb. Tross alt er det så mange problemer forårsaket av kompatibilitetsproblemer i flere nettlesere.

Problemet er ikke med standarden. Det er med nettleserne selv. Mange nettlesere har lagt til funksjonalitet i DOM-implementeringen som ikke samsvarer med W3C-standardene. Noen ganger blir denne funksjonaliteten populær og blir implementert i DOM-standarden, noe som tvinger andre nettlesere til å ta igjen.

Et annet problem er at noen fortsatt bruker eldre versjoner av nettlesere som ikke har den nyeste DOM-standarden innebygd. Og noen ganger implementerer nettlesere ikke standarden riktig.

Hvordan DOM er strukturert

Du kan tenke på DOM som et tre. De elementet er bagasjerommet, og alle elementene inni det er grener. Når du hekker HTML-elementer inne i et overordnet element, lager du faktisk grener utenfor den grenen. Den rette betegnelsen for hver gren er "node".

Trestrukturen skaper logiske forhold mellom noder, som et slektstre. Hver node kan ha en forelder og forfedre som den forgrener seg fra. De kan ha søsken. Og nodene kan få barn og etterkommere. Å tenke i disse vilkårene hjelper mye når du bruker JavaScript og CSS til å samhandle med DOM.

Hvordan HTML interagerer med DOM

DOM defineres ved å opprette et dokumentobjekt med dokumentgrensesnittet. HTML-koden din er den mest direkte måten å lage et dokument på. HTML gir deg en enkel måte å definere dokumentet uten å måtte gjøre tradisjonell programmering.

Hvis du nettopp har kommet i gang med HTML, er det her fem tips for å bli kjent med det.

5 trinn for å forstå grunnleggende HTML-kode

HTML er ryggraden på hver webside. Hvis du er nybegynner, kan vi gå gjennom de grunnleggende trinnene for å forstå HTML.

HTML er enklere og mer tilgivende enn tradisjonelle programmeringsspråk. Det gjør samhandling med DOM enkelt for nybegynnere webdesignere.

Hvordan CSS samhandler med DOM

Når HTML-en din har strukturert DOM-dokumentet, kan CSS style det dokumentet. For å gjøre det, må det være i stand til å finne elementene du vil style. Det gjør dette på noen få måter.

Du kan få tilgang til dokumentnoder ved å referere til elementer etter navn, som og. CSS kan også få tilgang til elementene direkte ved å referere klasse og id navn. Klassestyling blir brukt på flere elementer, slik at du kan style dem alle samtidig. Omvendt bruker id-styling endringer i bare et enkelt element.

Du kan også få tilgang til stamtrestrukturen med CSS og finjustere tilgangen for mer kontroll. CSS-velgerne lar deg velge flere elementer og gir deg en pose med triks for å finne dem. Du kan søke etter barn etter deres forfedre, kombinasjoner av klasser og mye mer.

Hvordan JavaScript interagerer med DOM

JavaScript har mest kontroll over dokumentet fordi JavaScript er et faktisk programmeringsspråk med objekter, flytkontroll, variabler osv. DOM gir flere grensesnitt som tillater JavaScript muligheten til å manipulere dokumentet, elementene og andre noder.

I slekt: Hva er JavaScript?

JavaScript kan legge til og fjerne noder, samt endre stil. Og JavaScript kan se på hendelser i dokumentet, som å sveve musen over et element, klikke og trykke på tastene.

JavaScript kan søke og navigere i dokumenttreet på en veldig lik måte som CSS. Det er i stand til å finne elementer etter id og klasse. Og det kan hente lister over underordnede elementer som matriser.

Fremtiden for nettutvikling og DOM

Internett har endret seg mye siden de første dagene. I de tidlige dager ble JavaScript mest brukt til spesialeffekter og enkle datavisninger. De fleste nettsteder var ikke mye mer enn digitale brosjyrer. AJAX endret alt det derimot.

AJAX tillater nettsteder å oppdatere data som vises fra en server på farten uten å laste siden inn på nytt. Før AJAX kunne alle endringer i data bare sees når siden ble lastet inn på nytt, eller når brukeren navigerte til en annen side.

Etter AJAX ble nettappene mer og mer populære. Internett er ikke lenger en samling av enkle statiske nettsteder og noen få apper med høy funksjonalitet, som eBay. Nå er internett nesten et andre operativsystem, fullt av svært funksjonelle apper.

Etter hvert som forventningene til brukerne vokser, må teknologien følge med. JavaScript er ikke det kraftigste eller raskeste språket. Det lider også av en håndfull problemer som feilnummer med flytende punkt som gjør det mindre ønskelig for utviklere. Det er her WebAssembly kommer inn.

WebAssembly gir mange av fordelene med innfødt kode til nettleseren, inkludert forbedret hastighet og bedre maskinvaretilgang. Det lar programmerere bruke andre språk for å bygge nettsteder som C ++ og Rust.

Men selv med de store forbedringene som WebAssembly vil bringe, vil DOM fortsatt være der, og gir et jevnt grensesnitt mellom koden og det som vises i nettleseren.

Hvordan bruke Outlook i mørk modus

Reduser belastningen på øynene og øk batterilevetiden ved å bytte Microsoft Outlook til mørk modus.

Om forfatteren