Skriveni junak web stranica: Razumijevanje DOM-a

"DOM" je pojam koji se često koristi u web dizajnu i razvoju web stranica. Kratica je "Model objekta dokumenta" i to je temeljni dio web stranica.

Koliko god je DOM važan, mnogi ga ljudi ne razumiju. Zapravo, web stranice možete programirati godinama, a da o tome ne naučite puno. No kako napredna tehnologija napreduje, razumijevanje DOM-a postaje sve važnije.

Razumijevanje DOM ugovora

U objektno orijentiranom programiranju postoji konstrukcija koja se naziva sučelje. Sučelje samostalno ništa ne radi. Umjesto toga, stvara ugovor. Kaže da sve može komunicirati s bilo čim drugim, sve dok slijedi pravila ugovora o sučelju.

Imati sučelje omogućuje bilo kojem dijelu programa kontroliranu i predvidljivu interakciju s bilo kojim drugim dijelom programa. Sučelje također omogućuje da jedan dio programa radi s bilo kojim drugim dijelom, čak i ako ne zna ništa o dijelu programa s druge strane sučelja.

Sučelje je poput električne utičnice u vašem zidu. Vaš uređaj ne mora znati odakle dolazi napajanje sve dok je napon ispravan. Transformator na uglu ne mora znati na što napaja. Potrebno je samo poslati struju pod odgovarajućim naponom u vašu kuću.

instagram viewer

DOM je sloj sučelja između web stranice i koda koji je stvara i mijenja. Kada posjetite web mjesto, vidite kako preglednik prikazuje DOM te web stranice. Kada pišete HTML, zapravo programirate pomoću DOM-ovog API-ja (programsko sučelje).

DOM standard održava organizacija tzv konzorcij za World Wide Webili W3C. Oni su stvorili vrlo detaljna dokumentacija koja definira DOM standard.

U ovom trenutku možda mislite da ne rade baš najbolje posao. Napokon, toliko je problema uzrokovanih problemima kompatibilnosti više preglednika.

Problem nije u standardu. To je sa samim preglednicima. Mnogi preglednici dodali su funkcionalnost svojoj DOM implementaciji koja nije u skladu sa standardima W3C. Ponekad ta funkcionalnost postaje popularna i ugrađuje se u DOM standard, prisiljavajući druge preglednike da ih sustignu.

Drugi je problem taj što neki ljudi još uvijek koriste starije verzije preglednika koji nemaju ugrađeni najnoviji DOM standard. A ponekad preglednici ne implementiraju standard ispravno.

Kako je DOM ustrojen

O DOM-u možete razmišljati kao o drvetu. The element je deblo, a svi elementi unutar njega su grane. Kada ugnijezdiš HTML elemente unutar nadređenog elementa, zapravo stvaraš grane od te grane. Ispravan izraz za svaku granu je "čvor".

Struktura stabla stvara logične odnose između čvorova, poput obiteljskog stabla. Svaki čvor može imati roditelja i pretke od kojih se grana. Mogu imati braću i sestre. A čvorovi mogu imati djecu i potomke. Razmišljanje na ovaj način uvelike pomaže kada se za interakciju s DOM-om koriste JavaScript i CSS.

Kako HTML komunicira s DOM-om

DOM se definira stvaranjem objekta dokumenta s sučeljem dokumenta. Vaš HTML kôd najizravniji je način za stvaranje dokumenta. HTML vam daje jednostavan način definiranja dokumenta bez potrebe za tradicionalnim programiranjem.

Ako tek započinjete s HTML-om, evo pet savjeta za upoznavanje s tim.

5 koraka za razumijevanje osnovnog HTML koda

HTML je okosnica svake web stranice. Ako ste početnik, propustit ćemo vas kroz osnovne korake za razumijevanje HTML-a.

HTML je jednostavniji i jednostavniji od tradicionalnih programskih jezika. Olakšava interakciju s DOM-om za web dizajnere početnike.

Kako CSS komunicira s DOM-om

Jednom kada vaš HTML strukturira DOM dokument, CSS ga može oblikovati. Da bi to učinio, mora biti u mogućnosti pronaći elemente koje želite stilizirati. To čini na nekoliko načina.

Čvorovima dokumenata možete pristupiti pozivanjem elemenata po imenu, poput i. CSS također može izravno pristupiti elementima referenciranjem razred i iskaznica imena. Stilski stil primjenjuje se na nekoliko elemenata tako da ih možete sve istovremeno oblikovati. Suprotno tome, id stil primjenjuje promjene samo na jedan element.

Također možete pristupiti strukturi obiteljskog stabla pomoću CSS-a i fino podesiti pristup za veću kontrolu. CSS birači omogućuju vam odabir više elemenata i daje vam hrpu trikova za njihovo pronalaženje. Djecu možete tražiti prema njihovim predanjima, kombinacijama razreda i još mnogo toga.

Kako JavaScript komunicira s DOM-om

JavaScript ima najveću kontrolu nad dokumentom jer je JavaScript stvarni programski jezik s objektima, kontrolom protoka, varijablama itd. DOM nudi nekoliko sučelja koja JavaScript-u omogućuju mogućnost manipulacije dokumentom, elementima i drugim čvorovima.

Povezano: Što je JavaScript?

JavaScript može dodavati i uklanjati čvorove, kao i mijenjati njihov stil. A JavaScript može pratiti događaje u dokumentu, poput zadržavanja miša na elementu, klika i pritiska tipki.

JavaScript može pretraživati ​​i kretati se kroz stablo dokumenata na vrlo sličan način kao i CSS. Može pronaći elemente prema id-u i klasi. I može dohvatiti popise podređenih elemenata kao nizove.

Budućnost web razvoja i DOM

Internet se puno promijenio od ranih dana. U prvim danima JavaScript se uglavnom koristio za specijalne efekte i jednostavne prikaze podataka. Većina web stranica nije bila puno više od digitalnih brošura. AJAX je sve to ipak promijenio.

AJAX omogućuje web mjestima ažuriranje podataka prikazanih s poslužitelja u letu bez ponovnog učitavanja stranice. Prije AJAX-a, svaka promjena podataka mogla se vidjeti samo kad se stranica ponovo učita ili korisnik pređe na drugu stranicu.

Nakon AJAX-a, web aplikacije postajale su sve popularnije. Internet više nije skup jednostavnih statičnih web stranica i nekoliko visoko funkcionalnih aplikacija, poput eBaya. Internet je sada gotovo drugi operativni sustav, prepun visoko funkcionalnih aplikacija.

Kako rastu očekivanja korisnika, tehnologija mora ići u korak. JavaScript nije najsnažniji ili najbrži jezik. Također pati od nekoliko problema poput pogrešaka s brojem s pomičnim zarezom koje ga čine manje poželjnim za programere. Ovdje dolazi WebAssembly.

WebAssembly donosi brojne prednosti domaćeg koda u preglednik, uključujući poboljšanu brzinu i bolji pristup hardveru. Omogućit će programerima upotrebu drugih jezika za izradu web stranica poput C ++ i Rust.

No, čak i uz ogromna poboljšanja koja će donijeti WebAssembly, DOM će i dalje biti tamo, pružajući dosljedno sučelje između koda i onoga što se prikazuje u pregledniku.

Kako koristiti Outlook u mračnom načinu rada

Smanjite naprezanje očiju i produžite trajanje baterije prebacivanjem Microsoft Outlooka u tamni način rada.

O autoru