"DOM" ir termins, kas daudz tiek izmantots front-end tīmekļa dizainā un izstrādē. Tas nozīmē "Document Object Model", un tā ir būtiska vietņu sastāvdaļa.

Lai cik svarīgs būtu DOM, daudzi cilvēki to nesaprot. Patiesībā jūs varat gadiem ilgi programmēt vietnes, neko daudz par to nezinot. Bet, attīstoties priekšgala tehnoloģijai, DOM izpratne kļūst arvien svarīgāka.

Izpratne par DOM līgumu

Objektorientētajā programmēšanā ir konstrukcija, ko sauc par saskarni. Interfeiss pats neko nedara. Tā vietā tas rada līgumu. Tajā teikts, ka jebkas var mijiedarboties ar jebko citu, ja vien tas atbilst saskarnes līguma noteikumiem.

Saskarnes izmantošana ļauj jebkurai programmas daļai kontrolētā un paredzamā veidā mijiedarboties ar jebkuru citu programmas daļu. Interfeiss arī ļauj vienai programmas daļai darboties ar jebkuru citu daļu, pat ja tā neko nezina par programmas daļu, kas atrodas saskarnes otrā pusē.

Interfeiss ir kā elektriskā kontaktligzda jūsu sienā. Jūsu ierīcei nav jāzina, no kurienes nāk strāva, ja vien spriegums ir pareizs. Transformatoram uz stūra nav jāzina, ko tas darbina. Tam vienkārši jānosūta elektrība uz jūsu māju ar atbilstošu spriegumu.

DOM ir interfeisa slānis starp tīmekļa lapu un kodu, kas to izveido un maina. Apmeklējot vietni, jūs redzat, kā pārlūks renderē šīs vietnes DOM. Rakstot HTML, jūs faktiski programmējat, izmantojot DOM API (programmēšanas saskarni).

DOM standartu uztur organizācija ar nosaukumu tīmekļa konsorcijsvai W3C. Viņi ir izveidojuši ļoti detalizēta dokumentācija, kas nosaka DOM standarta.

Šajā brīdī jūs varētu domāt, ka viņi nedara ļoti labu darbu. Galu galā ir tik daudz problēmu, ko rada dažādu pārlūkprogrammu saderības problēmas.

Problēma nav standartā. Tas notiek ar pašiem pārlūkiem. Daudzas pārlūkprogrammas DOM ieviešanai ir pievienojušas funkcionalitāti, kas neatbilst W3C standartiem. Dažreiz šī funkcionalitāte kļūst populāra un tiek ieviesta DOM standartā, liekot citām pārlūkprogrammām panākt.

Vēl viena problēma ir tā, ka daži cilvēki joprojām izmanto vecākas pārlūkprogrammu versijas, kurās nav iebūvēta jaunākā DOM standarta versija. Dažreiz pārlūkprogrammas pareizi neievieš standartu.

Kā tiek strukturēts DOM

Jūs varat domāt par DOM kā koku. The elements ir bagāžnieks, un visi tā iekšējie elementi ir zari. Kad jūs ievietojat HTML elementus vecākā elementa iekšpusē, jūs faktiski izveidojat atzarus no šī atzara. Pareizs katras filiāles termins ir "mezgls".

Koka struktūra rada loģiskas attiecības starp mezgliem, piemēram, ciltskoku. Katram mezglam var būt vecāki un senči, no kuriem tas sazarojas. Viņiem var būt brāļi un māsas. Un mezglos var būt bērni un pēcnācēji. Domāšana ar šiem noteikumiem ļoti palīdz, lietojot JavaScript un CSS, lai mijiedarbotos ar DOM.

Kā HTML mijiedarbojas ar DOM

DOM tiek definēts, izveidojot dokumenta objektu ar dokumenta saskarni. Jūsu HTML kods ir vistiešākais veids, kā izveidot dokumentu. HTML sniedz vienkāršu veidu, kā definēt dokumentu, neveicot tradicionālo programmēšanu.

Ja jūs tikko sākat strādāt ar HTML, šeit ir pieci padomi, lai ar to iepazītos.

5 soļi, lai izprastu HTML kodu

HTML ir katras tīmekļa lapas pamats. Ja esat iesācējs, ļaujiet mums iepazīties ar galvenajiem soļiem, lai izprastu HTML.

HTML ir vienkāršāks un piedodošāks nekā tradicionālās programmēšanas valodas. Tas atvieglo mijiedarbību ar DOM iesācēju tīmekļa dizaineriem.

Kā CSS mijiedarbojas ar DOM

Kad HTML ir strukturējis DOM dokumentu, CSS var stilizēt šo dokumentu. Lai to izdarītu, tai jāspēj atrast elementus, kurus vēlaties veidot. Tas to dara vairākos veidos.

Jūs varat piekļūt dokumentu mezgliem, atsaucoties uz elementiem pēc nosaukuma, piemēram un. CSS var arī piekļūt elementiem tieši, atsaucoties klasē un id vārdi. Klases stils tiek piemērots vairākiem elementiem, lai jūs varētu tos visus veidot vienlaikus. Un otrādi, id stils piemēro izmaiņas tikai vienam elementam.

Jūs varat arī piekļūt ciltskoku struktūrai ar CSS un precīzāku piekļuvi, lai nodrošinātu lielāku kontroli. CSS atlasītāji ļauj jums izvēlēties vairākus elementus un sniedz jums triku maisu to atrašanai. Jūs varat meklēt bērnus pēc viņu senčiem, klašu kombinācijām un daudz ko citu.

Kā JavaScript mijiedarbojas ar DOM

JavaScript visvairāk kontrolē dokumentu, jo JavaScript ir faktiska programmēšanas valoda ar objektiem, plūsmas vadību, mainīgajiem utt. DOM nodrošina vairākas saskarnes, kas ļauj JavaScript manipulēt ar dokumentu, elementiem un citiem mezgliem.

Saistīts: Kas ir JavaScript?

JavaScript var pievienot un noņemt mezglus, kā arī mainīt to stilu. JavaScript var skatīties dokumentā notikušos notikumus, piemēram, virzīt peles kursoru virs elementa, noklikšķināt un nospiest taustiņus.

JavaScript var meklēt un pārvietoties dokumentu kokā ļoti līdzīgā veidā kā CSS. Tas spēj atrast elementus pēc ID un klases. Un tas var izgūt bērnu elementu sarakstus kā masīvus.

Web izstrādes un DOM nākotne

Kopš pirmajām dienām internets ir daudz mainījies. Pirmajās dienās JavaScript galvenokārt tika izmantots specefektiem un vienkāršiem datu attēlojumiem. Lielākā daļa vietņu nebija daudz vairāk par digitālajām brošūrām. AJAX tomēr visu to mainīja.

AJAX ļauj vietnēm atjaunināt datus, kas tiek rādīti no servera, atrodoties lidojumā, nepārslogojot lapu. Pirms AJAX visas datu izmaiņas varēja redzēt tikai tad, kad lapa tika atkārtoti ielādēta vai lietotājs pārvietojās uz citu lapu.

Pēc AJAX tīmekļa lietotnes kļuva arvien populārākas. Internets vairs nav vienkāršu statisku vietņu un dažu augstas funkcionalitātes lietotņu, piemēram, eBay, kolekcija. Tagad internets ir gandrīz otra operētājsistēma, kas ir pilna ar ļoti funkcionālām lietotnēm.

Pieaugot lietotāju cerībām, tehnoloģijām ir jāseko līdzi. JavaScript nav visspēcīgākā vai ātrākā valoda. Tas cieš arī no dažiem jautājumiem, piemēram, ar peldošā komata kļūdām, kas padara to mazāk vēlamu izstrādātājiem. Šeit ienāk WebAssembly.

WebAssembly pārlūkprogrammā sniedz daudzas vietējā koda priekšrocības, tostarp lielāku ātrumu un labāku piekļuvi aparatūrai. Tas ļaus programmētājiem izmantot citas valodas, lai izveidotu tādas vietnes kā C ++ un Rust.

Bet pat ar plašajiem uzlabojumiem, ko nes WebAssembly, DOM joprojām būs, nodrošinot konsekventu saskarni starp kodu un pārlūkprogrammā redzamo.

E-pasts
Kā izmantot programmu Outlook tumšajā režīmā

Samaziniet acu slodzi un paildziniet akumulatora darbības laiku, pārslēdzot Microsoft Outlook uz Dark režīmu.

Saistītās tēmas
  • Programmēšana
  • HTML
  • CSS
  • Dokumenta objekta modelis
Par autoru
Lī Neitans (Publicēti 19 raksti)

Lī ir pilna laika nomads un polimāts ar daudzām kaislībām un interesēm. Dažas no šīm kaislībām ir saistītas ar produktivitāti, personības attīstību un rakstīšanu.

Vairāk no Lee Nathan

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam par tehniskiem padomiem, atsauksmēm, bezmaksas e-grāmatām un ekskluzīviem piedāvājumiem!

Vēl viens solis !!!

Lūdzu, apstipriniet savu e-pasta adresi e-pastā, kuru tikko nosūtījām.

.