Den dolda hjälten av webbplatser: Förstå DOM

"DOM" är en term som används mycket i front-end webbdesign och utveckling. Det står för "Document Object Model", och det är en grundläggande del av webbplatser.

Så viktigt som DOM är, många människor förstår det inte. I själva verket kan du programmera webbplatser i flera år utan att lära dig mycket om det. Men när avancerad teknik utvecklas blir förståelsen för DOM viktigare.

Förstå DOM-avtalet

I objektorienterad programmering finns det en konstruktion som kallas ett gränssnitt. Ett gränssnitt gör ingenting ensamt. Istället skapar det ett kontrakt. Det står att allt kan interagera med allt annat, så länge det följer reglerna i gränssnittskontraktet.

Att ha ett gränssnitt låter alla delar av ett program interagera med någon annan del av programmet på ett kontrollerat och förutsägbart sätt. Gränssnittet gör det också möjligt för en del av ett program att arbeta med någon annan del, även om den inte vet något om den del av programmet på andra sidan gränssnittet.

Ett gränssnitt är som ett eluttag i din vägg. Enheten behöver inte veta varifrån strömmen kommer så länge spänningen är korrekt. Transformatorn i hörnet behöver inte veta vad den driver. Det behöver bara skicka el till rätt spänning till ditt hus.

instagram viewer

DOM är ett gränssnittsskikt mellan webbsidan och koden som skapar och ändrar den. När du besöker en webbplats ser du hur webbläsaren gör DOM för den webbplatsen. När du skriver HTML programmerar du faktiskt med DOM: s API (programmeringsgränssnitt).

DOM-standarden upprätthålls av en organisation som kallas World Wide Web Consortiumeller W3C. De har skapat mycket detaljerad dokumentation som definierar DOM standard.

Vid den här tiden kanske du tänker att de inte gör ett särskilt bra jobb. Det finns trots allt så många problem som orsakas av kompatibilitetsproblem mellan webbläsare.

Problemet är inte med standarden. Det är med webbläsarna själva. Många webbläsare har lagt till funktioner i sin DOM-implementering som inte överensstämmer med W3C-standarderna. Ibland blir denna funktionalitet populär och implementeras i DOM-standarden, vilket tvingar andra webbläsare att komma ikapp.

Ett annat problem är att vissa fortfarande använder äldre versioner av webbläsare som inte har den senaste inbyggda DOM-standarden. Och ibland implementerar webbläsare inte standarden korrekt.

Hur DOM är uppbyggd

Du kan tänka på DOM som ett träd. De elementet är bagageutrymmet, och alla element inuti det är grenar. När du hyser HTML-element inuti ett överordnat element skapar du faktiskt grenar från den grenen. Den rätta termen för varje gren är "nod".

Trädstrukturen skapar logiska förhållanden mellan noder, som ett släktträd. Varje nod kan ha en förälder och förfäder som den förgrenar sig från. De kan ha syskon. Och noderna kan ha barn och ättlingar. Att tänka i dessa termer hjälper mycket när du använder JavaScript och CSS för att interagera med DOM.

Hur HTML interagerar med DOM

DOM definieras genom att skapa ett dokumentobjekt med dokumentgränssnittet. Din HTML-kod är det mest direkta sättet att skapa ett dokument. HTML ger dig ett enkelt sätt att definiera dokumentet utan att behöva göra traditionell programmering.

Om du precis har börjat med HTML är det här fem tips för att bekanta dig med det.

5 steg för att förstå grundläggande HTML-kod

HTML är ryggraden på varje webbsida. Om du är nybörjare, låt oss gå igenom de grundläggande stegen för att förstå HTML.

HTML är enklare och mer förlåtande än traditionella programmeringsspråk. Det gör interaktion med DOM lätt för nybörjare webbdesigners.

Hur CSS interagerar med DOM

När din HTML har strukturerat DOM-dokumentet kan CSS utforma det dokumentet. För att göra det måste den kunna hitta de element du vill utforma. Det gör det på några sätt.

Du kan komma åt dokumentnoder genom att referera till element efter namn, som och. CSS kan också komma åt elementen direkt genom att referera klass och id namn. Klassstyling appliceras på flera element så att du kan utforma dem alla samtidigt. Omvänt använder id-styling ändringar för endast ett enda element.

Du kan också komma åt släktträdstrukturen med CSS och finjustera åtkomst för mer kontroll. Med CSS-väljare kan du välja flera element och ge dig en påse med knep för att hitta dem. Du kan söka efter barn efter deras anor, klasskombinationer och mycket mer.

Hur JavaScript interagerar med DOM

JavaScript har mest kontroll över dokumentet eftersom JavaScript är ett verkligt programmeringsspråk med objekt, flödeskontroll, variabler etc. DOM tillhandahåller flera gränssnitt som gör det möjligt för JavaScript att manipulera dokumentet, elementen och andra noder.

Relaterad: Vad är JavaScript?

JavaScript kan lägga till och ta bort noder samt ändra stil. Och JavaScript kan titta på händelser i dokumentet, som att hålla muspekaren över ett element, klicka och trycka på tangenter.

JavaScript kan söka och navigera i dokumentträdet på ett mycket liknande sätt som CSS. Det kan hitta element efter id och klass. Och det kan hämta listor över underordnade element som matriser.

Framtiden för webbutveckling och DOM

Internet har förändrats mycket sedan början. I början användes JavaScript mest för specialeffekter och enkla datavisningar. De flesta webbplatser var inte mycket mer än digitala broschyrer. AJAX ändrade dock allt detta.

AJAX tillåter webbplatser att uppdatera data som visas från en server i farten utan att ladda om sidan. Innan AJAX kunde alla ändringar av data endast ses när sidan laddades om eller när användaren navigerade till en annan sida.

Efter AJAX blev webbappar mer och mer populära. Internet är inte längre en samling enkla statiska webbplatser och några appar med hög funktionalitet, som eBay. Nu är internet nästan ett andra operativsystem, fullt av mycket funktionella appar.

I takt med att användarnas förväntningar växer måste tekniken hänga med. JavaScript är inte det mest kraftfulla eller snabbaste språket. Det lider också av en handfull frågor som felnummer med flytande punkter som gör det mindre önskvärt för utvecklare. Det är här WebAssembly kommer in.

WebAssembly ger många av fördelarna med inbyggd kod till webbläsaren, inklusive förbättrad hastighet och bättre maskinvaruåtkomst. Det låter programmerare använda andra språk för att bygga webbplatser som C ++ och Rust.

Men även med de stora förbättringar som WebAssembly kommer att medföra, kommer DOM fortfarande att vara där, vilket ger ett konsekvent gränssnitt mellan koden och det som visas i webbläsaren.

Hur man använder Outlook i mörkt läge

Minska ögonbelastningen och öka batteriets livslängd genom att byta Microsoft Outlook till mörkt läge.

Om författaren