Uvod

U ovome članku sam pokušao da sakupim JavaScript isečke koda (eng. code snippets), koji mogu biti korisni u svakodnevnom radu sa DOM-om. Skoro svi snippet-i su napisani u dve verzije, koristeći samo plain JavaScript ili uz pomoć jQuery biblioteke.

js iseci koda - code snippets

Document Ready

U sledećim primerima je prikazan “event listener” koji čeka trenutak kada je DOM učitan da bi JavScript mogao sa njim da manipuliše. Isto bi se dobilo kada bi JavaScript kod stavili na kraj body-ja tj. ispred samog zatvarajućeg taga “body”.



Document Load

Dogadjaj load se “okida” tek kad se učita cela stranica sa svim CSS stilovima, slikama



Selektovanje DOM elemenata

Selektovanje preko CSS selektora

HTML

JavaScript
Izbor svih elemenata koji zadovoljavaju selektor

Primer

Izbor samo prvog elementa koji zadovoljava selektor

Ukoliko želimo da sa plain JS vratimo samo prvi element koji zadovoljava kriterijum selektora možemo da koristimo:

Sintaksa za starije browsere

Ukoliko postoji potreba da se zadovolje browseri koji su stariji od IE 11, onda je potrebno da se koriste sledeći JS selektori:

Primer

Selektovanje roditelja

HTML

JavaScript


Selektovanje sve dece

HTML

JavaScript

Naredne naredbe vraćaju niz elemenata sa svom decom izabranog selektora. U nrednim primerima je potrevon selektovati sve li elemente:


NAPOMENA:
Treba naglasiti da “childNodes” vraća kao dete elementa čak i prazan prostor izmedju HTML tagova (kao prazan text node)


Selektovanje prvog deteta

HTML

JavaScript

Ukoliko je želite prvo dete onda mogu da se koriste sledeće naredbe:


NAPOMENA:
Ukoliko postoji prazan prostor izmedju roditeljskog taga i prvog elementa koji mu je dete, neće vratiti taj element nego PRAZAN text node.


Selektovanje poslednjeg deteta

HTML

JavaScript

NAPOMENA:
Ukoliko postoji prazan prostor izmedju roditeljskog taga i poslednjeg elementa koji mu je dete, neće vratiti taj element nego PRAZAN text node.


Selektovanje prethodnog rodjaka

HTML

JavaScript

NAPOMENA:
Ukoliko postoji prazan prostor izmedju roditeljskog taga i poslednjeg elementa koji mu je dete, neće vratiti taj element nego PRAZAN text node.


Selektovanje narednog rodjaka

HTML

JavaScript

NAPOMENA:
Ukoliko postoji prazan prostor izmedju roditeljskog taga i poslednjeg elementa koji mu je dete, neće vratiti taj element nego PRAZAN text node.


Selektovanje svih rodjaka

HTML

JavaScript

U ovom primeru funkcija nadjiRodjake pravi novi niz od dece roditelja koji zadovoljavaju uslov. Dodaje elemente u niz ako ne postoji filter ili ako filter vraća neki element, sve dok postoji sledeći rodjak.

Filtriranje selektovanih elemenata

Redukovanje elemenata koji zadovoljavaju targetirani selektor ukoliko “prodju” test filtera. Test filtera može biti drugi selektor a najčešće je filter funkcija:

HTML

JavaScript

ili koristeći funkciju

Manipulacija DOM elementima

Pravljenje elementa



Dodavanje elementa kao deteta

Dodavanje novog elementa kao poslednjeg deteta kod svakog selektovanog elementa.


NAPOMENA:
Obratiti pažnju da se uz innerHTML koristi operator dodavanja i dodeljivanja “+=”, jer ako se koristi samo operator dedeljivanja “=” onda se pri menjanju DOM-a gaze svi elementi unutar elementa “roditelj” i pravi se novi modifikovani DOM, a ako postoje Event handlers koji su bili zakačeni za “stari DOM”, sada NE POSTOJE!

I varijanta

II varijanta:

Kloniranje elementa

Ukoliko je parametar “true” pravi se “deep copy” tj. kopija sa svim atributima i “child” elementima, dok ako se izabere “false” kopira se bez “child” elemenata.


Dodavanje pre elementa

Ako je referenceNode null onda se ubacuje na kraju liste svih childNodes (isto kao appendChild).

Primer dodavanja elementa u listu

Dodavanje posle elementa

Iako u JavaScript-u postoji insertBefore, medjutim NE POSTOJI insertAfter, stoga je potrebno da se pribegne “lukavstvu”:

Primer dodavanja elementa u listu

Brisanje elementa


Brise SVE span elemente

Brise samo span elemente sa ID=”izabrani”

Brisanje sve dece elementa



Obavijanje elementa sa elementom

HTML

JavaScript


Rezultat

Zamena elementa drugim

HTML

JavaScript

Primer

Provera da li postoji selektor (is)


Primer

U narednim snippet-ima se dobija booleanova vrednost, stoga ako je odgovor “true” onda su jednaki selektori. Uglavnom se koristi uz “if”.

Rad sa sadržajem DOM-a

Dobijanje sadržaja (teksta) unutar elementa

Naredni snippet-i vraćaju tekst odredjenog elementa:



Ubacivanje ili zamena sadržaja (teksta) unutar elementa

Naredni snippet-i menjaju postojeći tekst sa novim:



outerHTML elementa

HTML

JavaScript

Za HTML prezentaciju selektovanog elementa koristimo:


Jedan od retkih slučajeva kada jQuery nema direktnu metodu za neki problem a Plain JS ga ima, stoga se rešava zaobilazno (u “privremenom div elementu klonira naš element).

Vrednost unutar “input” ili “textarea”

Primer

JavaScript

Primer

JavaScript

Radio unput

HTML

JavaScript

Select

HTML

JavaScript

Rad sa HTML atributima

Dobijanje vrednosti HTML atributa

NAPOMENA:
Atributi: href, title, alt, i value imaju svoje “lično” svojstvo za pristup, stoga im se može lako pristupiti direktno preko njih:
HTML

Ostalim atributima koji nemaju svoju “ličnu” metodu možemo pristupiti na sledeći način:



Dobijanje vrednosti DATA atributa

Moram napomenuti da se ovaj podatak se može dobiti lako i prethodnim načinom kao običan HTML atribut.

NAPOMENA:
Ne koristiti velika slova u nazivima data atributa već koristiti crtice izmedju!

HTML

JavaScript

NAPOMENA:
Pri pozivanju u sklopu “dataset” syntax-e koristiti camelCase!


Setovanje vrednosti atributa

NAPOMENA:
Atributi: href, title, alt, i value imaju svoje “lično” svojstvo za pristup, stoga im se može lako pristupiti direktno preko njih:
HTML

JavaScript


NAPOMENA:
Dodati atributi se ne vide fizički u DOM-u, nego su sačuvani u memoriji.

Provera da li elemenat ima klasu

NAPOMENA:
Objekat classList nije podržan kod IE za verzije manje od IE10


Dodavanje klase elementu

NAPOMENA:
Objekat classList nije podržan kod IE za verzije manje od IE10


Uklanjanje klase

NAPOMENA:
Ovaj objekat classList nije podržan kod IE za verzije manje od IE10


Naizmenično dodavanje i brisanje klase (togle)

HTML

JavaScript
Bez toggle()

See the Pen Toogle plainJS by Web programiranje (@chos) on CodePen.

Sa togle()

NAPOMENA:
Ova metoda nije podržana u IE (pogledajte tabelu kompatibilnosti ovde)

Primer

Mix

Ili mix prethodna dva primera

See the Pen EvaKoN by Web programiranje (@chos) on CodePen.


Primer

Styling elementa

Dobijanje svojstava elementa

Pošto “getComputedStyle()” metoda vraća vrednosti svih svojstava u vidu “CSSStyleDeclaration” objekata, potrebno je koristi još i metodu getPropertyValue:

Primer

Primer

Definisanje CSS svojstava elementu

Definisanje jednog svojstva

Primer

Definisanje više svojstava odjednom

Primer

Definisanje vrednosti svojstva

Definisanje više svojstava odjednom

Show, hide i toggle

NAPOMENA:
Metode show() i toggle() zahtevaju i drugi atribut koji može biti: “block”, “flex” “inline-block”, “inline” …

Primer

NAPOMENA:
Sve tri metode imaju “ugradjenu” animaciju. Ukoliko želimo animaciju dovoljno je da prosledimo atribut funkciji koji definiše dužinu trajanja animacije. Sa ovim metodama se animira width, height, i opacity simultano. Takodje je moguće sa drugim atributom promeniti defaultni tip animacije “swing”.

Primer

Pozicija elementa

Visina i širina elementa

Box sa padding-om i border-om

Slično može da se dobije sa getBoundingClientRect() metodom (podržana >=IE9)

Box sa podding-om, borderom i marginom

Box bez border-a

Box sa padding-om i border-om

Box sa podding-om, borderom i marginom

Box bez border-a

Rastojanje elementa do roditelja

Vrednost od ivice izabranog elementa do ivice prvog “ne statičnnog” roditelja (onaj koji nema svojstvo position:”static”). Posmatra se leva i gornja ivica elementa.



Rastojanje elementa do dokumenta

Primer

Slično može da se dobije sa getBoundingClientRect() metodom:

Provera vidljivosti elementa u viewport-u

Sa narednim snippet-om proveravamo dali je izabrani element ceo vidljiv u viewport-u.

Primer

Scroll

Metoda koja vraća vrednost za koliko je skrolovan viewport nekog elementa je:

Za window/document možemo da koristimo i:

  • window.pageYOffset – nema podršku verzije < IE9
  • window.scrollY – nema podršku za IE
  • document.documentElement.scrollTop

Ali da bi postigli što veću cross browser kompatibilnost dobro je koristi sledeći izraz:

See the Pen JS scroll by Web programiranje (@chos) on CodePen.


Metoda koja vraća vrednost za koliko je skrolovan viewport nekog elementa je:

See the Pen jQuery scroll by Web programiranje (@chos) on CodePen.


Pozicija miša pri clik dogadjaju


Ukoliko se umesto taga body izabere neki drugi element dobijaćemo relativnu poziciju u odnosu na njega

Podelite:

Ostavite komentar