Programiranje DOM-a: manipulirajte web stranicama s kodom

Objava: Vaša podrška pomaže održavanju web mjesta! Naplaćujemo naknadu za preporuku za neke usluge koje preporučamo na ovoj stranici.


Model dokumenta ili DOM predmeta dokumenta opisuje kako se svaki element HTML stranice odnosi na sam dokument.

U biti, svaka HTML, XHTML ili XML stranica jednom prenesena na web, postaje dokument. DOM vidi te dokumente kao strukturu stabla. Sam dokument predstavlja gornju strukturu i svaki je element na stranici predstavljen kao objekt.

To znači da je svaka slika, svaki odlomak, svaki naslov i tako dalje zaseban objekt koji ima svoj odnos prema dokumentu.

Pozivanjem određenog elementa po njegovom imenu web programeri mogu taj element modificirati. To znači da web programeri mogu dohvatiti i postaviti svoja svojstva.

DOM također omogućuje dodavanje i uklanjanje elemenata ili predmeta. Konačno, web programerima omogućuje snimanje i reagiranje na radnje korisnika ili preglednika, učinkovito baveći se događajima.

Kratka povijest DOM-a

Povijest DOM-a seže u dane ratova za preglednike i objavljivanja prvih skriptnih jezika.

Nakon što su Navigator Netscape i Microsoftov Internet Explorer izdali vlastite verzije JavaScripta, programeri su se našli potrebnim sučeljem koje će omogućiti elementima na stranici s tim skriptnim jezicima..

Naravno, svaki je preglednik imao svoju metodu, ali to je rezultiralo mnogim problemima kompatibilnosti jer su proizvođači preglednika pokušali nadmašiti jedni druge dodavanjem novih značajki.

Na kraju je W3C počeo raditi na specifikaciji za XML DOM, koja se također naziva Level 1 DOM, a koja je trebala biti prenosiva u svim preglednicima..

Također je trebalo raditi na bilo kojem programskom jeziku koji bi mogao manipulirati XML dokumentima. Ova je specifikacija usvojena kao standard krajem 1998. Trenutačna verzija je DOM 4, W3C preporuka iz 2015.

Dva pogleda DOM-a

DOM se sastoji od dva dijela; jezgra i HTML. Jezgra je osnova za dio HTML-a i koristi se za predstavljanje funkcionalnosti potrebne za XML dokumente za manipulaciju strukturom dokumenta, njegovim elementima i atributima.

HTML dio definira specifične HTML elemente i njihovu funkcionalnost. Kao takav, DOM se vidi i kao API i kao objekt.

DOM kao API

Kao sučelje programskog programiranja (API) koristi se za HTML i XML dokumente. Daje nam standardni skup predmeta koji se koriste u tim dokumentima, a ujedno služi i kao način na koji se ti objekti mogu kombinirati, pristupati njima i manipulirati njima..

DOM kao objekt

Model objekta u DOM-u odnosi se na činjenicu da su dokumenti i elementi definirani kao objekti. U tom smislu on identificira:

  • Sučelja i objekti koji se koriste za predstavljanje i manipuliranje dokumentom
  • Njihovo ponašanje i atribute
  • Njihovi odnosi.

Struktura DOM-a

Strukturno gledano, DOM vrlo nalikuje dokumentu koji modelira. Svaki element dokumenta doživljava se kao objekt ili čvor, organiziran hijerarhijski.

Svaki čvor ima funkciju i identitet i svaki čvor također može imati bilo koji broj podređenih čvorova. Najčešći su čvorovi elementi, tekst i atributi.

Čvorovi elemenata

Čvorovi elemenata su pojedinačne oznake ili para oznaka u HTML kodu. Mogu imati podređene čvorove, što mogu biti drugi elementi ili tekstualni čvorovi.

Tekstni čvorovi

Tekstni čvorovi su stvarni sadržaj između HTML oznaka. Obično imaju roditeljski čvor i ponekad čvorove, ali ne mogu imati vlastite podređene čvorove.

Atributi čvorovi

Čvorovi atributa su nešto posebno. Nemaju roditeljski čvor, djecu ili čvorove, već umjesto toga predstavljaju atribute definirane u HTML oznakama, poput atributa href u oznakama ili atributa src u oznakama img.

Novi atribut može se stvoriti pomoću document.createAttribute (), a zatim ga možete dodijeliti čvoru elementa i postaviti njegovu vrijednost. Drugi način referenciranja atributa je pristup atributima elementa izravno pomoću getAttribute () i pomoću metode setAttribute () za postavljanje njegove vrijednosti.

Kada govorimo o atributima, vrijedno je napomenuti da je većina atributa koji se koriste s HTML oznakama relativno jednostavni, a sastoji se od jedne vrijednosti za određeno svojstvo povezano s tom oznakom. Međutim, postoje i atributi stila koji mogu biti i složeniji.

Atributi stila primjenjuju se uz pomoć CSS-a. Možete ga koristiti za primjenu stilova na pojedinačne oznake, sve oznake određene vrste ili možete dodijeliti atribute stila pomoću klasa.

Kako bi se stvari još više zakomplicirale, stilovi za određeni element mogu se naslijediti iz bilo kojeg od ovih izvora. Takvim stilovima možete manipulirati i mijenjati ili promjenom atributa stila oznake ili korištenjem atributa klase oznake.

Međutim, to će izmijeniti sve parametre stila elementa, a u nekim slučajevima to nije praktično, pogotovo ako želite promijeniti samo jedan parametar stila.

Srećom, stilski se atributi razlikuju od ostalih atributa. Oni su definirani kao objekti i imaju svojstva za svaki mogući parametar. Tim se svojstvima može pristupiti, ažurirati i na drugi način manipulirati.

Korištenje DOM-a

Budući da je svaki dokument također objekt, on služi kao polazna točka za manipuliranje drugim čvorovima u njemu. Tim dječjim čvorovima može se pristupiti i njima se manipulirati pomoću sljedećih metoda:

  • parametra getElementByID ()
  • getElementsByTagName ()
  • createElement ()
  • createAttribute ()
  • createTextNode ().

Također možete dinamički dodavati, ažurirati i uklanjati čvorove na sljedeće načine:

  • insertBefore ()
  • replaceChild ()
  • removeChild ()
  • appendChild ()
  • cloneNode ().

DOM je izravno vezan za HTML, CSS i JavaScript jer odražava oznake i atribute definirane tim standardima, a služi i kao API za skriptiranje na strani klijenta..

Resursi

Sljedeći popis resursa daje detaljan pregled DOM-a i pogodan je za početnike i napredne korisnike. Također je uključen referentni popis kao i izvori s primjerima.

  • JavaScript i DOM serija: ovo je vrlo detaljna serija tutorijala s detaljnim detaljima o korištenju JavaScripta za manipulaciju DOM-om.
  • JavaScript DOM Tutoriali: skup interaktivnih tutorijala koji vas uče kako pristupiti i upravljati DOM-om iz JavaScript-a. Prethodno znanje JavaScripta podrazumijeva, međutim, vrijedno je spomenuti da se ne koriste posebne knjižnice.
  • DOM čvorovi: vrlo temeljit pregled DOM čvorova pogodnih za početnike koji žele upoznati kako je DOM strukturiran i koje čvorove uključuje.
  • JavaScript DOM – Vježbe, vježbe, rješenje: skup različitih vježbi koje uključuju DOM u rasponu od jednostavnih vježbi do složenijih vježbi.
  • W3C objektni model dokumenta (DOM): ovaj vodič koji je objavio W3C nudi uvodni i početnički pregled DOM-a, povijesti i kako to radi.
  • Uvod u DOM: kratak konceptualni uvod u DOM koji je objavila Mozilla Developer Network koja objašnjava na koji način pruža strukturu za HTML i XML dokumente i kako možete pristupiti njemu.
  • W3C DOM4: najnovija DOM-ova preporuka W3C-a iz 2015. godine koja sadrži pregled i detaljne specifikacije za DOM.
  • DOM referenca: praktični referentni popis koji je objavila Microsoftova razvojna mreža, uključujući svojstva, metode, događaje i još mnogo toga.

knjige

Ako više volite učiti iz knjiga, postoji mnogo mogućnosti. Knjige na popisu idu u detalje o DOM-u, kako on funkcionira i kako se njima može manipulirati dokumentima.

  • DOM Skriptiranje: Web dizajn s JavaScriptom i dokumentnim modelom dokumenta (2005), autor Jeremy Keith: ova knjiga nudi brzu i jednostavnu referencu za one koji nisu stručnjaci za kod, ali žele brzo naučiti i iskoristiti JavaScript i DOM za dodavanje funkcionalnost njihovih web stranica. To uključuje obilje primjera i vodiče čitatelje kroz izgradnju nekoliko projekata stvarnog svijeta.
  • Document Object Model (2002), Joe Marini: autor ove knjige pomaže vam da naučite koncepte, dizajn, teoriju i porijeklo DOM-a. Kroz cijelu knjigu upotrijebit ćete DOM za pregled, kretanje i manipuliranje čvorovima i sadržajem dokumenta; zatim naučite graditi korisne aplikacije koje se lako mogu prenijeti u bilo koju DOM implementaciju bez ponovnog kodiranja.
  • DOM Prosvjetljenje: Istraživanje JavaScripta i modernog DOM-a (2013), Cody Lindley: uz pomoć ove knjige naučit ćete kako učinkovitije upravljati HTML-om skriptirajući Model objekta objekta (DOM) bez korištenja biblioteke DOM-a. Uz puno lakih probavnih primjera, autor vam daje potpunu strukturu modernih DOM koncepata kako bi pokazao kako rade različiti čvorni objekti.

Idite dalje i pređite DOM

Razumijevanje DOM-a jedan je od bitnih koncepata za svakog početnika web programera.

Najbolji dio toga je što vam ne trebaju posebni alati da biste ih koristili. Sve što trebate je skripta i željeni preglednik. Čim stvorite skriptu i uključite je u svoju web stranicu, možete početi koristiti API za elemente dokumenta ili prozora za manipuliranje dokumentom na različite načine.

Gore navedeni resursi poslužit će vam kao solidna polazna točka u obilasku DOM-a.

Daljnje čitanje i izvori

Imamo više vodiča, vodiča i infografika vezanih za kodiranje i izradu web stranica:

  • Sastavljanje dobrog HTML-a: ovo je čvrst uvod u pisanje dobro formiranog HTML-a i korištenje HTML softvera za provjeru valjanosti.
  • CSS3 – Uvod, vodiči i resursi: ovo je sjajno mjesto za početak učenja izgleda web stranica.
  • Resursi ASP.NET: ovaj vodič upoznat će vas s Microsoftovim .NET okvirom za stvaranje web stranica.

HTML za početnike – Ultimativni vodič

Ako zaista želite naučiti HTML, izradili smo članak o duljini knjige, HTML za početnike – Ultimate Guide.

I zaista je to krajnji vodič; vodit će vas od samog početka do majstorstva.

HTML za početnike - Ultimativni vodič
HTML za početnike – Ultimativni vodič

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map