WEBnSTUDY.com
Web DOM

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
  1. Mozilla Developer Network, Node
  2. Mozilla Developer Network, Element
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.