Skriti junak spletnih strani: Razumevanje DOM-a

"DOM" je izraz, ki se pogosto uporablja pri spletnem oblikovanju in razvoju. Okrajšava je "Document Object Model" in je temeljni del spletnih mest.

Kakor je DOM pomemben, ga mnogi ljudje ne razumejo. Pravzaprav lahko spletna mesta programirate leta, ne da bi se o tem kaj dosti naučili. Toda z napredkom napredne tehnologije je razumevanje DOM-a vse pomembnejše.

Razumevanje pogodbe DOM

V objektno usmerjenem programiranju obstaja konstrukt, imenovan vmesnik. Vmesnik sam ne naredi ničesar. Namesto tega ustvari pogodbo. Pravi, da lahko kar koli vpliva na kar koli drugega, če upošteva pravila pogodbe o vmesniku.

Če imate vmesnik, lahko kateri koli del programa kontrolirano in predvidljivo komunicira s katerim koli drugim delom programa. Vmesnik omogoča tudi, da en del programa deluje s katerim koli drugim delom, tudi če o delu programa na drugi strani vmesnika ne ve ničesar.

Vmesnik je kot električna vtičnica v vaši steni. Naprava ne mora vedeti, od kod prihaja napajanje, če je napetost pravilna. Transformatorju na vogalu ni treba vedeti, kaj napaja. Samo v vašo hišo mora poslati elektriko z ustrezno napetostjo.

instagram viewer

DOM je vmesni sloj med spletno stranjo in kodo, ki jo ustvari in spremeni. Ko obiščete spletno mesto, vidite, kako brskalnik upodobi DOM tega spletnega mesta. Ko pišete HTML, dejansko programirate z uporabo DOM-ovega API-ja (programski vmesnik).

Standard DOM vzdržuje organizacija z imenom konzorcij za svetovni spletali W3C. Ustvarili so zelo podrobna dokumentacija, ki opredeljuje DOM standard.

V tem trenutku morda mislite, da ne delajo zelo dobro. Navsezadnje je toliko težav, ki jih povzročajo težave z združljivostjo med brskalniki.

Težava ni v standardu. To je s samimi brskalniki. Številni brskalniki so svoji izvedbi DOM dodali funkcionalnost, ki ni v skladu s standardi W3C. Včasih ta funkcionalnost postane priljubljena in se vključi v standard DOM, kar prisili druge brskalnike, da nadoknadijo.

Druga težava je, da nekateri še vedno uporabljajo starejše različice brskalnikov, ki nimajo vgrajenega najnovejšega standarda DOM. In včasih brskalniki standarda ne izvajajo pravilno.

Kako je strukturiran DOM

DOM si lahko predstavljate kot drevo. The element je deblo in vsi elementi v njem so veje. Ko gnetite elemente HTML znotraj nadrejenega elementa, dejansko ustvarite veje iz te veje. Pravilen izraz za vsako vejo je "vozlišče".

Drevesna struktura ustvarja logična razmerja med vozlišči, kot je družinsko drevo. Vsako vozlišče ima lahko starša in prednike, od katerih se veje. Lahko imajo brate in sestre. In vozlišča imajo lahko otroke in potomce. Razmišljanje v teh pogojih zelo pomaga pri uporabi JavaScript in CSS za interakcijo z DOM.

Kako HTML deluje z DOM-om

DOM je definiran z ustvarjanjem predmeta dokumenta z vmesnikom dokumenta. Vaša koda HTML je najbolj neposreden način za ustvarjanje dokumenta. HTML vam omogoča preprost način definiranja dokumenta, ne da bi vam bilo treba izvajati tradicionalno programiranje.

Če ste šele začeli uporabljati HTML, tukaj so pet nasvetov za seznanitev z njo.

5 korakov za razumevanje osnovne kode HTML

HTML je hrbtenica vsake spletne strani. Če ste začetnik, vas bomo vodili skozi osnovne korake za razumevanje HTML-ja.

HTML je preprostejši in bolj prizanesljiv kot tradicionalni programski jeziki. Olajša interakcijo z DOM za začetnike spletnih oblikovalcev.

Kako CSS komunicira z DOM

Ko HTML oblikuje dokument DOM, lahko CSS ta dokument oblikuje. Če želite to narediti, mora biti sposoben najti elemente, ki jih želite oblikovati. To počne na nekaj načinov.

Do vozlišč dokumentov lahko dostopate s sklicevanjem na elemente po imenu, na primer in. CSS lahko do elementov dostopa tudi neposredno s sklicevanjem razred in id imena. Oblikovanje predavanj se uporabi za več elementov, tako da jih lahko vse hkrati oblikujete. Nasprotno, oblikovanje id uporablja spremembe samo za en element.

Do strukture družinskega drevesa lahko dostopate tudi s CSS in natančno nastavite dostop za več nadzora. Izbirniki CSS vam omogočajo izbiro več elementov in vam nudijo vrsto trikov za njihovo iskanje. Otroke lahko iščete po njihovih prednikih, kombinacijah razredov in še veliko več.

Kako JavaScript deluje z DOM-om

JavaScript ima največ nadzora nad dokumentom, ker je JavaScript dejanski programski jezik s predmeti, nadzorom pretoka, spremenljivkami itd. DOM ponuja več vmesnikov, ki JavaScript omogočajo manipulacijo z dokumentom, elementi in drugimi vozlišči.

Sorodno: Kaj je JavaScript?

JavaScript lahko dodaja in odstranjuje vozlišča ter spreminja njihov slog. In JavaScript lahko spremlja dogodke v dokumentu, na primer premikanje miške nad elementom, klikanje in pritiskanje tipk.

JavaScript lahko išče in premika po drevesu dokumentov na zelo podoben način kot CSS. Elemente lahko najde po id in razredu. In lahko pridobi sezname podrejenih elementov kot polja.

Prihodnost spletnega razvoja in DOM

Od zgodnjih dni se je internet zelo spremenil. V prvih dneh se je JavaScript večinoma uporabljal za posebne učinke in preproste prikaze podatkov. Večina spletnih strani ni bila veliko več kot digitalne brošure. AJAX pa je vse to spremenil.

AJAX spletnim mestom omogoča sprotno posodabljanje podatkov, prikazanih s strežnika, brez ponovnega nalaganja strani. Pred AJAX-om je bila vsaka sprememba podatkov vidna šele, ko je bila stran ponovno naložena ali ko je uporabnik preusmeril na drugo stran.

Po AJAX-u so spletne aplikacije postajale vse bolj priljubljene. Internet ni več skupek preprostih statičnih spletnih mest in nekaj visoko funkcionalnih aplikacij, kot je eBay. Zdaj je internet skoraj drugi operacijski sistem, poln zelo funkcionalnih aplikacij.

Ker pričakovanja uporabnikov rastejo, mora tehnologija slediti. JavaScript ni najzmogljivejši ali najhitrejši jezik. Trpi tudi zaradi peščice težav, kot so napake s številom s plavajočo vejico, zaradi katerih je razvijalcem manj zaželena. Tu nastopi WebAssembly.

WebAssembly prinaša brskalniku številne prednosti izvorne kode, vključno z izboljšano hitrostjo in boljšim dostopom do strojne opreme. Programerjem bo omogočil uporabo drugih jezikov za izdelavo spletnih mest, kot sta C ++ in Rust.

Toda tudi z velikimi izboljšavami, ki jih bo prinesla WebAssembly, bo DOM še vedno na voljo in zagotavlja skladen vmesnik med kodo in prikazom v brskalniku.

Kako uporabljati Outlook v temnem načinu

S preklopom Microsoft Outlooka v temni način zmanjšajte obremenitev oči in podaljšajte življenjsko dobo baterije.

O avtorju