Veebisaitide varjatud kangelane: DOM-i mõistmine

"DOM" on termin, mida kasutatakse palju veebipõhise veebidisaini ja -arenduse valdkonnas. See tähistab "Document Object Model" ja see on veebisaitide oluline osa.

Nii tähtis kui DOM on, ei saa paljud sellest aru. Tegelikult saate veebisaite aastaid programmeerida, ilma et oleksite sellest palju õppinud. Kuid kui eesmine tehnoloogia areneb, on DOM-ist arusaamine üha olulisem.

DOM-lepingu mõistmine

Objektorienteeritud programmeerimisel on olemas konstruktsioon, mida nimetatakse liideseks. Liides ei tee midagi ise. Selle asemel loob see lepingu. Seal öeldakse, et kõik võib suhelda millegi muuga, kui see järgib liidese lepingu reegleid.

Liidese olemasolu võimaldab programmi mis tahes osal kontrollida ja prognoositaval viisil suhelda programmi mis tahes muu osaga. Liides võimaldab ka programmi ühel osal töötada mis tahes muu osaga, isegi kui see ei tea midagi liidese teisel küljel asuvast programmi osast.

Liides on nagu teie seina pistikupesa. Teie seade ei pea teadma, kust toide tuleb, kui pinge on õige. Nurga all olev trafo ei pea teadma, mida see toidab. See peab lihtsalt saatma teie majale elektrit õige pingega.

instagram viewer

DOM on liidese kiht veebilehe ja koodi vahel, mis seda loob ja muudab. Veebisaiti külastades näete, kuidas brauser renderdab selle veebisaidi DOM-i. HTML-i kirjutades programmeerite tegelikult DOM-i API (programmeerimisliides) abil.

DOM-i standardit haldab organisatsioon nimega veebi konsortsiumvõi W3C. Nad on loonud väga üksikasjalik dokumentatsioon, mis määratleb DOM-i standard.

Sel hetkel võite arvata, et nad ei tee väga head tööd. Lõppude lõpuks on brauseriteüleste ühilduvusprobleemide tõttu nii palju probleeme.

Probleem pole standardis. Seda brauseritega endil. Paljud brauserid on oma DOM-i juurutamisele lisanud funktsionaalsust, mis ei vasta W3C standarditele. Mõnikord muutub see funktsionaalsus populaarseks ja rakendatakse DOM-i standardisse, sundides teisi brausereid järele jõudma.

Teine probleem on see, et mõned inimesed kasutavad endiselt brauserite vanemaid versioone, millel pole uusimat DOM-standardi sisseehitatud. Ja mõnikord ei rakenda brauserid standardit õigesti.

Kuidas DOM on üles ehitatud

Võite mõelda DOM-ist nagu puu. The element on pagasiruum ja kõik selle sees olevad elemendid on oksad. Kui pesitsete HTML-elemente vanemelemendi sisse, loote sellest harust tegelikult harusid. Iga haru õige termin on "sõlm".

Puu struktuur loob sõlmede vahel loogilised seosed nagu sugupuu. Igal sõlmel võib olla vanem ja esivanemad, kellest see hargneb. Neil võivad olla õed-vennad. Ja sõlmedel võivad olla lapsed ja järeltulijad. Nendes tingimustes mõtlemine aitab palju, kui JavaScripti ja CSS-i kasutamisel DOM-iga suhtlemiseks.

Kuidas HTML suhtleb DOM-iga

DOM määratletakse dokumendi liidese abil dokumendiobjekti loomisega. Teie HTML-kood on kõige otsesem viis dokumendi loomiseks. HTML annab teile lihtsa viisi dokumendi määratlemiseks, ilma et peaksite tegema traditsioonilist programmeerimist.

Kui olete HTML-iga alles alustanud, siis siin viis näpunäidet sellega tutvumiseks.

5 sammu HTML-i põhikoodi mõistmiseks

HTML on iga veebilehe selgroog. Kui olete algaja, lubage meil tutvustada HTML-i mõistmise peamisi samme.

HTML on lihtsam ja andestavam kui traditsioonilised programmeerimiskeeled. See muudab DOM-iga suhtlemise algajate veebidisainerite jaoks lihtsaks.

Kuidas CSS suhtleb DOM-iga

Kui teie HTML on DOM-dokumendi struktureerinud, saab CSS selle dokumendi kujundada. Selleks peab see suutma leida elemendid, mida soovite stiilida. Ta teeb seda mitmel viisil.

Dokumendisõlmedele pääsete juurde, viidates elementidele nimede järgi ja. CSS pääseb elementidele juurde ka otse viidates klass ja id nimed. Klassi kujundust rakendatakse mitmele elemendile, nii et saate neid kõiki korraga kujundada. Seevastu id-stiil rakendab muudatusi ainult ühele elemendile.

Perekonnastruktuurile pääseb juurde ka CSS-i abil ja juurdepääsu täpsustamiseks täpsema kontrolli saamiseks. CSS-i selektorid võimaldavad teil valida mitu elementi ja annavad nende leidmiseks hulga nippe. Lapsi saate otsida nende esivanemate, klasside kombinatsioonide ja palju muu järgi.

Kuidas JavaScript DOM-iga suhtleb

Javascriptil on dokumendi üle kõige suurem kontroll, kuna JavaScript on tegelik programmeerimiskeel koos objektide, voo juhtimise, muutujatega jne. DOM pakub mitmeid liideseid, mis võimaldavad JavaScriptil dokumendi, elementide ja muude sõlmedega manipuleerida.

Seotud: Mis on JavaScript?

JavaScripti abil saab nii sõlme lisada ja eemaldada kui ka nende stiili muuta. Ja JavaScripti abil saab jälgida dokumendis toimuvaid sündmusi, näiteks hiire hõljutamist elemendi kohal, klõpsamist ja klahvide vajutamist.

JavaScript saab otsida ja navigeerida dokumendipuus CSS-iga väga sarnasel viisil. See on võimeline leidma elemente ID ja klassi järgi. Ja see võib tuua massiividena alamelementide loendid.

Veebiarenduse tulevik ja DOM

Internet on algusaegadest alates palju muutunud. Algusaegadel kasutati JavaScripti enamasti eriefektide ja lihtsate andmete kuvamiseks. Enamik veebisaite polnud midagi enamat kui digitaalsed brošüürid. AJAX muutis seda kõike siiski.

AJAX võimaldab veebisaitidel ajakohastada serverilt kuvatavaid andmeid ilma lehte uuesti laadimata. Enne AJAX-i oli kõiki andmete muudatusi näha ainult siis, kui leht oli uuesti laaditud või kasutaja navigeeris teisele lehele.

Pärast AJAX-i muutusid veebirakendused üha populaarsemaks. Internet ei ole enam lihtsate staatiliste veebisaitide ja mõne suure funktsionaalsusega rakenduse, nagu eBay, kogu. Nüüd on Internet peaaegu teine ​​operatsioonisüsteem, mis on täis väga funktsionaalseid rakendusi.

Kasutajate ootuste kasvades peab tehnoloogia sammu pidama. JavaScript pole kõige võimsam ega kiireim keel. Samuti kannatab see käputäis probleeme, näiteks ujukomaarvude vead, mis muudavad selle arendajatele vähem soovitavaks. Siin tuleb sisse WebAssembly.

Veebikoosseis toob brauserisse palju algse koodi eeliseid, sealhulgas suurema kiiruse ja parema riistvarale juurdepääsu. See võimaldab programmeerijatel kasutada muid keeli selliste veebisaitide loomiseks nagu C ++ ja Rust.

Kuid isegi WebAssembleeni kaasnevate tohutute täiustuste korral jääb DOM siiski alles, pakkudes järjepidevat liidest koodi ja brauseris kuvatava vahel.

Kuidas kasutada Outlooki pimedas režiimis

Vähendage silmade koormust ja suurendage aku kasutusaega, lülitades Microsoft Outlooki tumedale režiimile.

Autori kohta