Uvođenje i uklanjanje DOM objekata
Do sada smo naučili kako da se krećemo kroz DOM stablo elemenata. Sada ćemo naučiti kako da dodajemo i brišemo objekte unutar DOM strukture. Pošto moramo biti u mogućnosti da ubacimo/uklonimo sve što može da se pojavi u HTML dokumentu, od teksta pa do bilo kog elementa, metodi koji se koriste za ove operacije pripadaju objektu Node.
| Node | |
|---|---|
| appendChild(novi) | Ubacuje nov podobjekat kao poslednji podređeni objekat |
| insertBefore(novi, postojeći) | Ubacuje nov podobjekat ispred postojećeg |
| replaceChild(novi, postojeći) | Umesto postojećeg ubacuje novi podobjekat |
| removeChild(postojeći) | Uklanja zadati podobjekat |
| Element | |
| remove() | Uklanja sam elemenat za koji se poziva |
Metodi
Pogledajmo sada malo detaljnije kako funkcionišu ovi metodi.
appendChild()
Metod appendChild() je svakako najlakše koristiti. Služi za dodavanje objekta na kraj liste podobjekata. Metod ima jedan parametar koji predstavlja refrenecu na objekat koji ubacujemo kao podobjekat. Dakle, generalno metod funkcioniše ovako:
objekat.appendChild(novi)
Znači ako imamo <div> elemenat kome dodajemo novi pasus, on će biti dodat kao poslednji podobjekat <div> elementa:
div.appendChild(pasus)
U dokumentu bi to izgledalo ovako:
<div>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
insertBefore()
Dodavanje elementa na kraju liste podelemenata je lako, ali često nije baš korisno. Bilo bi lepo kada bismo mogli da ubacimo elemenat bilo gde među podelementima. Upravo ovaj problem nam rešava metod insertBefore(). Ovaj metod je malo komplikovaniji pošto zahteva da zadamo dva parametra. Prvi je refrenca na objekat koji ubacujemo, a drugi je referenca na podobjekat ispred koga vršimo ubacivanje.
objekat.insertBefore(novi, postojeći)
Pomoću ovog metoda možemo ubaciti novi podobjekat kao prvi ili na bilo koje mesto među podobjektima (osim kao poslednji, naravno). Ne zaboravite da nam ovde trebaju tri reference - dva parametra i referenca na objekat u koji vršimo ubacivanje. Slično kao malopre, ako bismo već imali objekat div u koji želimo da ubacimo objekat pasus ispred objekta span, to bi izgledalo ovako:
div.insertBefore(pasus, span)
Situacija bi izgledala ovako:
<div>
<p>...</p>
<p>...</p>
<span>...</span>
<p>...</p>
</div>
replaceChild()
Da bismo jedan podobjekat zamenili drugim, koristimo metod replaceChild(). Ovaj metod se koristi na potpuno isti način kao i insertBefore(), jedino što umesto ubacivanja objekta, vrši zamenu postojećeg podobjekta.
objekat.replaceChild(novi, postojeći)
removeChild()
remove()
Konačno, potrebno je i da nekako obrišemo podobjekat. Koristimo metod removeChild(), a kao parametar zadajemo referencu podobjekta koji treba ukloniti:
objekat.removeChild(postojeći)
Takođe, nekom elementu možemo "narediti" da se sam obriše. Koristimo metod remove(), i to bez parametara:
objekat.remove()
Dakle, removeChild() uklanja podobjekat, a remove() uklanja sam elemenat za koji se poziva.
Primer
Sada ćemo simulirati situaciju u kojoj primenjujemo ova četiri metoda na jedan isti dokument. Recimo da u HTML-u imamo ovakvu situaciju:
<div id="blok">
<p>Prvi pasus...</p>
<p id="spec">Još teksta...</p>
</div>
Uvođenje ispred nekog elementa
Sada ćemo iskoristiti metod insertBefore() da "sveže" kreirani naslov h2 ubacimo kao prvi objekat unutar elementa označenog kao "blok".
var obj = document.getElementById("blok"); // referenca na element identifikovan kao "blok"
var prvi = obj.firstElementChild; // referenca na prvi podobjekat
var naslov = document.createElement("h2"); // kreiramo HTML elemenat <h2>
naslov.innerHTML = "Primer"; // hajde da zadamo i tekst naslova
// ubacivanje H2 naslova ispred (do sada) prvog podobjekta
obj.insertBefore(naslov, prvi);
Sada je u HTML-u situacija ovakva:
<div id="blok">
<h2>Primer</h2>
<p>Prvi pasus...</p>
<p id="spec">Još teksta...</p>
</div>
Uvođenje elementa na kraj
Sada ćemo dodati još jedan novi element, ali kao poslednji unutar bloka, pomoću metoda appendChild(). Ovaj deo programa radimo kao da prethodni ne postoji.
var obj = document.getElementById("blok"); // referenca na DIV element "blok"
var plus = document.createElement("aside"); // kreiramo elemenat <aside>
plus.innerHTML = "Komentar"; // sadrzaj novog elementa
// dodavanje elementa na kraj
obj.appendChild(plus);
HTML sada izgleda ovako:
<div id="blok">
<h2>Primer</h2>
<p>Prvi pasus...</p>
<p id="spec">Još teksta...</p>
<aside>Komentar</aside>
</div>
Zamena elemenata
Sada ćemo zameniti pasus "spec" span elementom, pomoću metode replaceChild().
var obj = document.getElementById("blok"); // referenca na DIV element "blok"
var pasus = document.getElementById("spec"); // referenca na pasus "spec"
var novo = document.createElement("span"); // kreiramo elemenat <span>
novo.innerHTML = "Novi tekst"; // sadrzaj novog elementa
// zamena elemenata
obj.replaceChild(novo, pasus);
Rezultat je:
<div id="blok">
<h2>Primer</h2>
<p>Prvi pasus...</p>
<span>Novi tekst</span>
<aside>Komentar</aside>
</div>
Brisanje elementa
Već nam je jasno da u stvari sve što nam treba su reference na elemente. Jednom kada ih imamo - bez obzira da li smo ih "uhvatili" iz HTML-a, kreirali nov element ili iskoristili neko od svojstava za kretanje kroz DOM - možemo da manipulišemo dokumentom kako god poželimo.
Tako, ako želimo da obrišemo element, sve što nam treba je referenca nadređenog objekta iz koga pozivamo metod removeChild(), gde zadajemo referencu elementa koji se briše. Ovde ćemo demonstrirati kako da na lak način obrišemo bilo koji elemenat i to tako što ćemo obrisati sam div blok.
var obj = document.getElementById("blok"); // referenca na DIV element "blok"
obj.parentNode.removeChild(obj); // brisanje elementa obj
Kao što vidimo - lako je. Samo nam treba referenca na nadređeni objekat koju dobijamo zahvaljujući svojstvu parentNode, a onda iz tog nadređenog objekta pozivamo metod removeChild(), zadajući referencu samog elementa koji se briše.
Isto bismo mogli da postignemo i metodom remove(), ali kada ga pozivamo za sam elemenat koji želimo da uklonimo.
var obj = document.getElementById("blok"); // referenca na DIV element "blok"
obj.remove(); // brisanje elementa obj