Što je objektni model dokumenta i zašto biste ga trebali znati koristiti.

Dakle, proučavali ste HTML, stvorili ste prve oznake, naučili o CSS-u, napravili prekrasne obrasce, nevjerojatne gumbe, responzivne stranice i počeli svima pokazivati ​​kako je sve to bilo nevjerojatno.

Ali onda odlučite da želite napraviti još jedan korak u učenju i sami ste se zapitali: „Kako mogu dodati animaciju na svoju stranicu? Volio bih da je taj gumb napravio neku animaciju na mojoj stranici kad sam ga kliknuo! "

E, tu DOM dolazi riješiti vaš problem. Vjerojatno ste o tome puno čuli, ali možda još ne znate što je to i koje probleme rješava. Pa krenimo.

Pa, što je DOM?

Znate li sve one cool animacije koje vidite oko sebe, a koje vas natjeraju da pomislite u sebi: "Opa, volio bih da mogu napraviti tako nešto"? Sve te animacije napravljene su manipulacijom DOM-a. Sad ću vam objasniti kako početi manipulirati time i učiniti vaše web stranice hladnijima.

DOM (objektni model dokumenta) je sučelje koje predstavlja kako preglednik čita vaše HTML i XML dokumente. Omogućuje jeziku (JavaScript) da manipulira, strukturira i oblikuje vašu web stranicu. Nakon što preglednik pročita vaš HTML dokument, stvara reprezentacijsko stablo nazvano Model objekta dokumenta i definira kako se tom stablu može pristupiti.

Prednosti

Manipulirajući DOM-om, imate beskrajne mogućnosti. Možete stvoriti aplikacije koje ažuriraju podatke stranice bez potrebe za osvježavanjem. Također, možete stvoriti aplikacije koje korisnik može prilagoditi, a zatim promijeniti izgled stranice bez osvježavanja. Možete povlačiti, premještati i brisati elemente.

Kao što sam rekao, imate beskrajne mogućnosti - samo trebate iskoristiti svoju kreativnost.

Zastupljenost preglednika

Na gornjoj slici možemo vidjeti predstavničko stablo i kako ga stvara preglednik. U ovom primjeru imamo četiri važna elementa koja ćete vidjeti puno:

  1. Dokument : Obrađuje sve HTML dokumente.
  2. Elementi : Sve oznake koje se nalaze u vašem HTML-u ili XML-u pretvaraju se u DOM element.
  3. Tekst : Sadržaj svih oznaka.
  4. Atributi : Svi atributi određenog HTML elementa. Na slici je atribut class = "hero" atribut iz elementa < p>.

Manipuliranje DOM-om

Sada prelazimo na najbolji dio: početak manipuliranja DOM-om. Prvo ćemo stvoriti HTML element kao primjer da vidimo neke metode i kako događaji rade.

      Entendendo o DOM (Document Object Model) 

00:00:00

Start Stop Reset

Vrlo jednostavno, zar ne? Sada ćemo naučiti više o DOM metodama: kako doći do naših elemenata i početi manipulirati.

Metode

DOM ima puno metoda. Oni su veza između naših čvorova (elemenata) i događaja, o čemu ćemo kasnije naučiti više. Pokazat ću vam neke od najvažnijih metoda i kako se koriste. Postoji puno više metoda koje vam ovdje neću pokazati, ali sve metode možete vidjeti ovdje.

getElementById ()

Ova metoda vraća element koji sadrži dodano ime id . Kao što znamo, id -ovi bi trebali biti jedinstveni, pa je vrlo korisna metoda da dobijete samo onaj element koji želite.

var myStart = document.getElementsById('start');

myStart : Naše ime varijable koje izgleda slično dodanom našem id .

početak : id je prošao. A u slučaju da nemamo nijedan id s tim određenim imenom, vraća null .

getElementsByClassName ()

Ova metoda vraća HTMLCollection svih onih elemenata koji sadrže određenu prosljeđenu klasu imena .

var myContainer = document.getElementsByClassName('container');

myContainer : Naše ime varijable koje izgleda slično prošloj klasi .

.kontejner : naš je razred prošao. U slučaju da nemamo nijednu klasu s tim određenim imenom, ona vraća nulu .

getElementsByTagName ()

To djeluje na isti način kao i gore navedene metode: također vraća HTMLCollection, ali ovaj put s jednom razlikom: vraća sve one elemente s dodanim imenom oznake.

var buttons = document.getElementsByTagName('button');

gumbi : Naš naziv varijable koji izgleda slično imenu dodanog naziva .

button : naziv oznake koji želimo dobiti.

querySelector ()

Vraća prvi element koji je prošao određeni CSS selektor . Sjetite se samo da bi selektor trebao slijediti CSS sintaksu . U slučaju da nemate nijedan selektor , vraća nulu .

var resetButton = document.querySelector('#reset');

resetButton : Ime naše varijable koje izgleda slično kao i naš selektor .

#reset : selektor je proslijeđen, a ako nemate nijedan selektor koji se podudara, vraća nulu .

querySelectorAll ()

Vrlo sličan metodi querySelector () , ali s jednom razlikom: vraća sve elemente koji se podudaraju s proslijeđenim CSS selektorom . Selektor treba slijediti CSS sintaksa . U slučaju da nemate nijedan selektor , vraća nulu .

var myButtons = document.querySelector('#buttons');

myButtons : Ime naše varijable koje izgleda slično prošlim našim selektorima .

#buttons : selektor je proslijeđen, ako nemate nijedan selektor koji se podudara, vraća nulu .

To su neke od najčešće korištenih DOM metoda. Postoji još nekoliko metoda koje možete koristiti, poput createElement (), koji stvara novi element na vašoj HTML stranici i setAttribute () koji vam omogućuje postavljanje novih atributa za elemente HTML. Možete ih sami istražiti.

Opet, sve metode možete pronaći ovdje, s lijeve strane u Metodama . Zaista vam preporučujem da pogledate neke druge jer će vam možda uskoro zatrebati.

Sada ćemo učiti o Događajima - uostalom bez njih ne možemo raditi animacije na našim stranicama.

Događaji

DOM elementi imaju metode , kao što smo upravo razgovarali, ali imaju i događaje . Ti su događaji odgovorni za omogućavanje interaktivnosti na našoj stranici. Ali evo jedne stvari koju možda ne znate: događaji su također metode .

klik

Jedan od najčešće korištenih događaja je klik. Kada korisnik klikne na određeni element, shvatit će neku radnju.

myStart.addEventListener('click', function(event) {
// Do something here.
}, false);

Parametri addEventListener () su:

  1. Vrsta događaja koji želite (u ovom slučaju ' kliknite ').
  2. Funkcija povratnog poziva
  3. UseCapture po defaultu je lažna. Označava želite li događaj "snimiti" ili ne.

Odaberi

Ovi su događaji za slučaj kada želite poslati nešto kada je odabran određeni element. U tom ćemo slučaju poslati jednostavno upozorenje .

myStart.addEventListener('select', function(event) {
alert('Element selected!');
}, false);

Ovo su neki od najčešće korištenih događaja. Naravno, imamo puno drugih događaja koje možete koristiti, poput povlačenja i ispuštanja - kada korisnik počne povlačiti neki element, možete izvršiti neku radnju, a kada ispustite taj element, možete izvršiti još jednu radnju.

Sad ćemo vidjeti kako možemo preći DOM i koristiti neka svojstva.

Prelazak DOM-a

Možete preći DOM i koristiti neka svojstva koja ćemo sada vidjeti. Pomoću ovih svojstava možete vratiti elemente, komentare, tekst itd.

.dijetli čvorovi

Ovo svojstvo vraća nodeList podređenih čvorova datog elementa. Vraća tekst, komentare i tako dalje. Dakle, kada ga želite koristiti, budite oprezni.

var container = document.querySelector('.container');
var getContainerChilds = container.childNodes;

.prvo dijete

Ovo svojstvo vraća prvo podređeno mjesto datog elementa.

var container = document.querySelector('.container');
var getFirstChild = container.firstChild;

.nodeName

Ovo svojstvo vraća ime datog elementa. U ovom smo slučaju proslijedili div , pa će vratiti " div ".

var container = document.querySelector('.container');
var getName = container.nodeName;

.nodeValue

Ovo je svojstvo specifično za tekstove i komentare jer vraća ili postavlja vrijednost trenutnog čvora . U ovom slučaju, budući da smo prošli div, vratit će nulu .

var container = document.querySelector('.container')
var getValue = container.nodeValue;

.nodeType

Ovo svojstvo vraća vrstu datog elementa. U ovom slučaju vraća " 1 ".

var container = document.querySelector('.container')
var getValue = container.nodeType;

Ali, što uopće znači " 1 "? U osnovi je nodeType datog elementa. U ovom slučaju to je _ELEMENT_NODE_ i vraća nulu. Da je ovo atribut, on bi nam se vratio kao " 2 " i vrijednost atributa.

Ovdje možete pročitati više o nodeTypes .

Elementi

Ova svojstva, umjesto gore navedenih, vraćaju nam samo elemente . Češće se koriste i preporučuju jer mogu uzrokovati manje zabune i lakše ih je razumjeti.

.parentNode

Ovo svojstvo vraća nadređenog datog čvora.

var container = document.querySelector('.container')
var getParent = container.parentNode;

.firstElementChild

Vraća prvi podređeni element datog elementa.

var container = document.querySelector('.container')
var getValue = container.firstElementChild;

.lastElementChild

Vraća zadnji podređeni element datog elementa.

var container = document.querySelector('.container')
var getValue = container.lastElementChild;

Ovo su neka od mnogih svojstava koja ima DOM. Za vas je vrlo važno znati osnove o DOM-u, kako on funkcionira te njegove metode i svojstva, jer će vam jednog dana možda trebati.

Zaključak

DOM nam nudi nekoliko važnih API-ja za stvaranje fantastičnih i inovativnih aplikacija. Ako razumijete njegove osnove, možete stvoriti nevjerojatne stvari. Ako želite pročitati više o DOM-u, možete kliknuti ovdje i pročitati sve MDN dokumente.

? F me ollow na Twitteru!

F ollow mnom na GitHub!

Tražim priliku na daljinu, pa ako bih volio čuti o njoj, zato me kontaktirajte!