„DOM“ yra terminas, kuris labai dažnai naudojamas kuriant ir kuriant front-end tinklalapį. Tai reiškia „dokumento objekto modelį“ ir yra pagrindinė svetainių dalis.
Kad ir koks svarbus yra DOM, daugelis žmonių to nesupranta. Tiesą sakant, jūs galite daugelį metų programuoti svetaines, daug apie tai nežinodami. Tačiau pažangiajai technologijai tobulėjant, suprasti DOM tampa vis svarbiau.
Suprasti DOM sutartį
Objektiniame programavime yra konstrukcija, vadinama sąsaja. Sąsaja pati nieko neveikia. Vietoj to sukuriama sutartis. Jame sakoma, kad viskas gali sąveikauti su bet kuo kitu, jei tik laikomasi sąsajos sutarties taisyklių.
Turėdami sąsają, bet kuri programos dalis gali kontroliuotai ir nuspėjamai sąveikauti su bet kuria kita programos dalimi. Sąsaja taip pat leidžia vienai programos daliai dirbti su bet kuria kita dalimi, net jei ji nieko nežino apie kitoje sąsajos pusėje esančią programos dalį.
Sąsaja yra tarsi elektros lizdas jūsų sienoje. Jūsų prietaisui nereikia žinoti, iš kur gaunama energija, jei tik įtampa yra tinkama. Kampe esančiam transformatoriui nereikia žinoti, ką jis maitina. Jam tiesiog reikia į jūsų namus siųsti elektros energiją tinkama įtampa.
DOM yra sąsajos sluoksnis tarp tinklalapio ir kodo, kuris jį kuria ir keičia. Apsilankę svetainėje matote, kaip naršyklė pateikia tos svetainės DOM. Rašydami HTML, jūs iš tikrųjų programuojate naudodami DOM API (programavimo sąsają).
DOM standartą palaiko organizacija, vadinama „World Wide Web Consortium“arba W3C. Jie sukūrė labai išsami dokumentacija, apibrėžianti DOM standartas.
Šiuo metu galite galvoti, kad jie dirba ne itin gerai. Galų gale yra tiek daug problemų, kurias sukelia skirtingų naršyklių suderinamumo problemos.
Problema ne dėl standarto. Tai yra pačiose naršyklėse. Daugelis naršyklių pridėjo DOM funkcijų, kurios neatitinka W3C standartų. Kartais ši funkcija tampa populiari ir įtraukiama į DOM standartą, priversdama kitas naršykles pasivyti.
Kita problema yra ta, kad kai kurie žmonės vis dar naudoja senesnes naršyklių versijas, kuriose nėra naujausio DOM standarto. Kartais naršyklės netinkamai įgyvendina standartą.
Kaip yra sudaryta DOM
Apie DOM galite galvoti kaip apie medį. elementas yra bagažinė, o visi jo viduje esantys elementai yra šakos. Kai įdėsite HTML elementus į pagrindinį elementą, jūs iš tikrųjų sukuriate atšakas nuo tos šakos. Tinkamas kiekvienos šakos terminas yra „mazgas“.
Medžio struktūra sukuria loginius ryšius tarp mazgų, pavyzdžiui, šeimos medį. Kiekvienas mazgas gali turėti tėvus ir protėvius, iš kurių jis šakojasi. Jie gali turėti brolių ir seserų. Ir mazgai gali turėti vaikų ir palikuonių. Galvojimas šiais terminais labai padeda naudojant „JavaScript“ ir CSS sąveikai su DOM.
Kaip HTML sąveikauja su DOM
DOM apibrėžiamas sukūrus dokumento objektą su dokumento sąsaja. Jūsų HTML kodas yra tiesiausias būdas sukurti dokumentą. HTML suteikia jums paprastą būdą apibrėžti dokumentą nereikalaujant tradicinio programavimo.
Jei dar tik pradedate naudoti HTML, čia yra penki patarimai, kaip su juo susipažinti.
HTML yra kiekvieno tinklalapio pagrindas. Jei esate pradedantysis, leiskite mums sužinoti pagrindinius HTML supratimo veiksmus.
HTML yra paprastesnis ir atlaidesnis nei tradicinės programavimo kalbos. Tai leidžia lengvai bendrauti su DOM pradedantiesiems interneto dizaineriams.
Kaip CSS sąveikauja su DOM
Kai HTML sukonstruos DOM dokumentą, CSS gali stilizuoti tą dokumentą. Norėdami tai padaryti, ji turi sugebėti rasti elementus, kuriuos norite stilizuoti. Tai daro keliais būdais.
Galite pasiekti dokumentų mazgus, nurodydami elementus pagal pavadinimą, pvz ir. CSS taip pat gali tiesiogiai pasiekti elementus, nurodydamas nuorodas klasė ir id vardai. Klasės stilius pritaikomas keliems elementams, todėl galite juos stilizuoti vienu metu. Ir atvirkščiai, „id“ stiliaus pakeitimai taikomi tik vienam elementui.
Taip pat galite pasiekti šeimos medžio struktūrą naudodami CSS ir tikslinę prieigą, kad galėtumėte geriau valdyti. CSS selektoriai leidžia pasirinkti kelis elementus ir suteikia jums daugybę gudrybių, kaip juos rasti. Galite ieškoti vaikų pagal jų kilmę, klasių derinius ir daug daugiau.
Kaip „JavaScript“ sąveikauja su DOM
„JavaScript“ labiausiai kontroliuoja dokumentą, nes „JavaScript“ yra tikroji programavimo kalba su objektais, srauto valdymu, kintamaisiais ir kt. DOM pateikia kelias sąsajas, leidžiančias „JavaScript“ manipuliuoti dokumentu, elementais ir kitais mazgais.
Susijęs: Kas yra „JavaScript“?
„JavaScript“ gali pridėti ir pašalinti mazgus, taip pat pakeisti jų stilių. „JavaScript“ gali stebėti įvykius dokumente, pvz., Užvesti pelės žymeklį virš elemento, spustelėti ir paspausti klavišus.
„JavaScript“ gali ieškoti ir naršyti dokumentų medį labai panašiai kaip CSS. Jis gali rasti elementus pagal ID ir klasę. Ir tai gali gauti vaikų elementų sąrašus kaip masyvus.
Žiniatinklio kūrimo ir DOM ateitis
Internetas nuo pat pirmųjų dienų labai pasikeitė. Pirmosiomis dienomis „JavaScript“ dažniausiai buvo naudojamas specialiesiems efektams ir paprastiems duomenų rodymui. Dauguma svetainių nebuvo daug daugiau nei skaitmeninės brošiūros. Vis dėlto AJAX visa tai pakeitė.
AJAX leidžia svetainėms atnaujinti duomenis, rodomus iš serverio skrendant, neperkraunant puslapio. Prieš AJAX visi duomenų pakeitimai galėjo būti matomi tik tada, kai puslapis buvo įkeltas iš naujo, arba vartotojui pereinant į kitą puslapį.
Po AJAX interneto programos tapo vis populiaresnės. Internetas nebėra paprastų statinių svetainių ir kelių aukšto funkcionalumo programų, tokių kaip „eBay“, rinkinys. Dabar internetas yra beveik antra operacinė sistema, pilna labai funkcionalių programų.
Augant vartotojų lūkesčiams, technologijos turi neatsilikti. „JavaScript“ nėra pati galingiausia ar greičiausia kalba. Ji taip pat kenčia nuo kelių problemų, pvz., Slankiojo kablelio skaičiaus klaidų, dėl kurių kūrėjams tai yra mažiau pageidautina. Čia ateina „WebAssembly“.
„WebAssembly“ suteikia daugybę vietinio kodo pranašumų naršyklėje, įskaitant didesnį greitį ir geresnę prieigą prie aparatūros. Tai leis programuotojams naudoti kitas kalbas kuriant tokias svetaines kaip „C ++“ ir „Rust“.
Tačiau net ir atlikus didžiulius patobulinimus, kuriuos atneš „WebAssembly“, DOM vis tiek išliks ir užtikrins nuoseklią sąsają tarp kodo ir to, kas rodoma naršyklėje.
Sumažinkite akių įtampą ir pailginkite baterijos veikimo laiką, perjungdami „Microsoft Outlook“ į tamsią būseną.
- Programavimas
- HTML
- CSS
- Dokumento objekto modelis
Lee yra visą laiką dirbantis klajoklis ir daugelio aistrų bei interesų turintis polimatas. Kai kurios iš tų aistrų sukasi apie produktyvumą, asmeninį tobulėjimą ir rašymą.
Prenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kuriame rasite techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Dar vienas žingsnis…!
Prašome patvirtinti savo el. Pašto adresą el. Laiške, kurį jums ką tik išsiuntėme.
