Verkkosivustojen piilotettu sankari: DOM: n ymmärtäminen

"DOM" on termi, jota käytetään paljon käyttöliittymän web-suunnittelussa ja kehittämisessä. Se tarkoittaa "Document Object Model", ja se on olennainen osa verkkosivustoja.

Niin tärkeä kuin DOM on, monet ihmiset eivät ymmärrä sitä. Itse asiassa voit ohjelmoida verkkosivustoja vuosia oppimatta siitä paljon. Mutta etupään tekniikan kehittyessä DOM: n ymmärtäminen on yhä tärkeämpää.

DOM-sopimuksen ymmärtäminen

Kohdekeskeisessä ohjelmoinnissa on rakenne, jota kutsutaan rajapinnaksi. Käyttöliittymä ei tee mitään yksin. Sen sijaan se luo sopimuksen. Siinä sanotaan, että mikä tahansa voi olla vuorovaikutuksessa minkä tahansa muun kanssa, kunhan se noudattaa käyttöliittymäsopimuksen sääntöjä.

Käyttöliittymän avulla minkä tahansa ohjelman osan voi olla vuorovaikutuksessa minkä tahansa muun ohjelman osan kanssa hallitusti ja ennustettavasti. Käyttöliittymä mahdollistaa myös yhden ohjelman osan työskentelemisen minkä tahansa muun osan kanssa, vaikka se ei tiedä mitään käyttöliittymän toisella puolella olevasta ohjelman osasta.

Liitäntä on kuin seinässä oleva pistorasia. Laitteesi ei tarvitse tietää, mistä virta tulee, kunhan jännite on oikea. Kulman muuntajan ei tarvitse tietää, mitä se käyttää. Sen on vain lähetettävä sähköä oikealla jännitteellä taloon.

DOM on käyttöliittymäkerros verkkosivun ja koodin välillä, joka luo ja muuttaa sitä. Kun vierailet verkkosivustolla, näet, kuinka selain renderöi kyseisen sivuston DOM: n. Kun kirjoitat HTML-koodia, ohjelmoit itse asiassa DOM: n API: lla (ohjelmointirajapinta).

DOM-standardia ylläpitää organisaatio nimeltä World Wide Web Consortiumtai W3C. He ovat luoneet erittäin yksityiskohtainen asiakirja, jossa määritellään DOM vakiona.

Tässä vaiheessa saatat ajatella, etteivät he tee kovin hyvää työtä. Loppujen lopuksi selainten välisten yhteensopivuusongelmien aiheuttamia ongelmia on niin paljon.

Ongelma ei ole standardissa. Se tapahtuu itse selainten kanssa. Monet selaimet ovat lisänneet DOM-toteutukseensa toimintoja, jotka eivät ole W3C-standardien mukaisia. Joskus siitä toiminnasta tulee suosittu ja se otetaan käyttöön DOM-standardissa, mikä pakottaa muut selaimet kiinni.

Toinen ongelma on, että jotkut ihmiset käyttävät edelleen vanhempia versioita selaimista, joissa ei ole uusinta DOM-standardin sisäänrakennettua versiota. Ja joskus selaimet eivät toteuta standardia oikein.

Kuinka DOM on rakennettu

Voit ajatella DOMia kuin puuta. elementti on runko, ja kaikki sen sisällä olevat elementit ovat haaroja. Kun pesit HTML-elementtejä pääelementin sisälle, luot itse asiassa haaroja tältä haaralta. Oikea termi kullekin haaralle on "solmu".

Puun rakenne luo solmujen välille loogiset suhteet, kuten sukupuu. Jokaisella solmulla voi olla vanhempi ja esi-isät, joista se haarautuu. Heillä voi olla sisaruksia. Ja solmuilla voi olla lapsia ja jälkeläisiä. Näillä termeillä ajatteleminen auttaa paljon, kun käytät JavaScriptiä ja CSS: ää vuorovaikutuksessa DOM: n kanssa.

Kuinka HTML on vuorovaikutuksessa DOM: n kanssa

DOM määritetään luomalla asiakirjaobjekti asiakirjan käyttöliittymällä. HTML-koodisi on suorin tapa luoda asiakirja. HTML antaa sinulle yksinkertaisen tavan määritellä asiakirja tarvitsematta tehdä perinteistä ohjelmointia.

Jos olet vasta aloittamassa HTML: n käyttöä, tässä on viisi vinkkiä perehtyäksesi siihen.

5 vaihetta HTML-koodin ymmärtämiseen

HTML on jokaisen verkkosivun selkäranka. Jos olet aloittelija, anna meidän opastaa HTML-kielen ymmärtämisen perusvaiheet.

HTML on yksinkertaisempi ja anteeksiantavampi kuin perinteiset ohjelmointikielet. Se tekee vuorovaikutuksen DOM: n kanssa helppoa aloittelijoille verkkosuunnittelijoille.

Kuinka CSS on vuorovaikutuksessa DOM: n kanssa

Kun HTML-tiedosto on jäsentänyt DOM-asiakirjan, CSS voi tyylittää kyseisen asiakirjan. Tätä varten sen on pystyttävä löytämään elementit, jotka haluat muotoilla. Se tekee tämän muutamalla tavalla.

Voit käyttää asiakirjasolmuja viittaamalla elementteihin nimen perusteella, kuten ja. CSS voi myös käyttää elementtejä suoraan viittaamalla luokassa ja id nimet. Luokan tyyliä sovelletaan useisiin elementteihin, joten voit muotoilla ne kaikki samanaikaisesti. Päinvastoin, id-muotoilu muuttaa muutoksia vain yhteen elementtiin.

Voit käyttää sukupuun rakennetta myös CSS: llä ja hienosäätää käyttöoikeuksia hallinnan lisäämiseksi. CSS-valitsinten avulla voit valita useita elementtejä ja antaa sinulle pussin temppuja niiden löytämiseen. Voit etsiä lapsia heidän syntyperänsä, luokkayhdistelmiensä ja paljon muun perusteella.

Kuinka JavaScript on vuorovaikutuksessa DOM: n kanssa

Javascript hallitsee eniten asiakirjaa, koska JavaScript on todellinen ohjelmointikieli, jossa on esineitä, vuonhallintaa, muuttujia jne. DOM tarjoaa useita käyttöliittymiä, jotka antavat JavaScriptille mahdollisuuden käsitellä asiakirjaa, elementtejä ja muita solmuja.

Liittyvät: Mikä on JavaScript?

JavaScript voi lisätä ja poistaa solmuja sekä muuttaa niiden tyyliä. Ja JavaScript voi tarkkailla asiakirjan tapahtumia, kuten hiiren osoittamista elementin päälle, napsauttamista ja näppäinten painamista.

JavaScript voi etsiä ja selata dokumenttipuuta hyvin samalla tavalla kuin CSS. Se pystyy löytämään elementtejä tunnuksen ja luokan mukaan. Ja se voi hakea luetteloita lapsielementeistä taulukkoina.

Verkkokehityksen ja DOM: n tulevaisuus

Internet on muuttunut paljon alkuaikoista lähtien. Ensimmäisinä päivinä JavaScriptiä käytettiin enimmäkseen erikoistehosteita ja yksinkertaisia ​​datanäyttöjä varten. Suurin osa verkkosivustoista ei ollut paljon muuta kuin digitaaliset esitteet. AJAX muutti kuitenkin kaiken sen.

AJAX sallii verkkosivustojen päivittää palvelimelta näkyvät tiedot lennossa lataamatta sivua uudelleen. Ennen AJAX: ää kaikki tietomuutokset näkyivät vain, kun sivu ladattiin uudelleen tai kun käyttäjä siirtyi toiselle sivulle.

AJAX: n jälkeen verkkosovellukset tulivat yhä suositummiksi. Internet ei ole enää kokoelma yksinkertaisia ​​staattisia verkkosivustoja ja muutamia korkean toiminnallisuuden sovelluksia, kuten eBay. Nyt Internet on melkein toinen käyttöjärjestelmä, täynnä erittäin toimivia sovelluksia.

Käyttäjien odotusten kasvaessa tekniikan on pysyttävä mukana. JavaScript ei ole tehokkain tai nopein kieli. Se kärsii myös muutamasta ongelmasta, kuten liukulukujen virheistä, jotka tekevät siitä vähemmän toivottavan kehittäjille. Tässä tulee WebAssembly.

WebAssembly tuo monia natiivikoodin etuja selaimeen, mukaan lukien nopeampi nopeus ja parempi laitteiston käyttö. Se antaa ohjelmoijien käyttää muita kieliä verkkosivustojen, kuten C ++ ja Rust, rakentamiseen.

Mutta vaikka WebAssemblyn tuomat suuret parannukset olisivatkin, DOM on silti olemassa ja tarjoaa yhtenäisen käyttöliittymän koodin ja selaimessa näytettävän välillä.

Kuinka käyttää Outlookia pimeässä tilassa

Vähennä silmien rasitusta ja pidentä akun käyttöikää vaihtamalla Microsoft Outlook tummaksi.

Kirjailijasta