Sadržaj DOM elemenata

Različiti tipovi DOM objekata imaju razlilčite mogućnosti za definisanje i iščitavanje sadržaja. Taj sadržaj može biti običan tekst ili čitav HTML kod.

Objekat Node

nodeValue

Ovo svojstvo predstavlja tekstualni sadržaj specifičnih objekata, i to samo ako su ti objekti:

• tekstualni objekat - svaki "komad" teksta u HTML-u je tekstualni objekat i ovo svojstvo sadrži sam taj tekst
• komentar - HTML komentari su inače nevidljivi na stranici ali i te kako učestvuju kao objekti u DOM hijerarhiji - ovo svojstvo u sebi sadrži tekst komentara
• CDATA odeljak - predstavlja "neaktivni" deo u XML dokumentu - nodeValue onda predstavlja njegov sadržaj
• instrukcija za procesiranje - još jedna specifičnost XML-a su instrukcije za aplikcaiju koje XML parser inače ignoriše - nodeValue predstavlja sadržaj instrukcije
• svi ostali tipovi - svojstvo nodeValue ima vrednost null

To znači da ovim svojstvom ne možemo menjati niti čitati sadržaj HTML elemenata, već samo određenih tipova objekata.

textContent

Svojstvo textContent pri čitanju kao rezultat daje tekstualni sadržaj objekta, s tim što u njega uključuje i sve podobjekte. Praktično, ovo je tekstualna reprezentacija sadržaja objekta.

Prilikom upisa u svojstvo možemo zadati bilo kakav tekst. Ako bismo zadali čak i HTML kod, on se ne bi tumačio na takav način, već kao običan tekst. Zadavanjem sadržaja preko ovog svojstva, gube se svi podređeni objekti i ostaje samo jedan tekstualni objekat čiji se sadržaj sastoji od zadatog teksta.

Za tekstualne objekte, komentare, CDATA odeljke ili instrukcije za procesiranje, ovo svojstvo se ponaša isto kao nodeValue. To znači da je textContent praktično jedino što nam treba...

  var obj = document.createElement("div");
  obj.textContent = "<p>Ovo je <b>važan tekst</b>.</p>";

  <div id="primer">
    <p>Ovo je pasus u bloku.</p>
    <b>Posle pasusa postoji i jedan bold tekst.</b>
  </div>

  var t = document.getElementById("primer").textContent;
  // sadržaj promenljive t bi bio bukvalno čist tekst:
  // "Ovo je pasus u bloku. Posle pasusa postoji i jedan bold tekst."

Objekat Element

innerHTML

Svojstvo innerHTML nam omogućava da na lak način ubacimo HTML kod u obliku teksta unutar nekog elementa, i to sa sve oznakama i parametrima. Naravno, tekst koji se zadaje uopšte ne mora da sadrži HTML oznake, već da predstavlja običan sadržaj elementa.

Promenom ovog svojstva, momentalno menjamo kompletan sadržaj elementa. Od trenutka kada ubacimo sadržaj u neki element, web čitač ga "parsira" (tumači) i odmah možemo pristupati podelementima tog elementa. Zahvaljujući tome, možemo kombinovati ovakav način definisanja sadržaja i rad sa elementima preko DOM-a.

outerHTML

Svojstvo outerHTML funkcioniše na isti način kao i innerHTML, uz jednu ključnu razliku. HTML kod koji zadajemo u obliku teksta, zamenjuje sam elemenat za koji se zadaje.

Na ovaj način možemo zadati i više elemenata koji zamenjuju originalan element.

Oba ova svojstva - i innerHTML i outerHTML predstavljaju "prljav", ali brz način kreiranja elemenata i njihovog sadržaja. Obično ga koristimo kada formiramo HTML na serveru ili kada nemamo neke specifične potrebe. Ako želimo da odmah pri kreiranju definišemo i event handlere, ili da u elemente dodamo posebna (nestandardna) svojstva, bolje da koristimo čisti DOM način (createElement, appendChild...).

Ako želimo da unutar sadržaja elementa dobijemo npr. znakove <, > i slične, koji imaju značenje u HTML-u, moramo koristiti specijalne oznake &lt;, &gt;, itd.

  var obj = document.createElement("div");
  obj.innerHTML = '<p class="spec">Ovo je <b>važan tekst</b>.</p>';

  var obj = document.getElementById("sek");
  obj.outerHTML = '<div onclick="pokusaj()"><p class="spec">Ovo je <b>važan tekst</b>.</p></div>';
  // obj od ovog trenutka nije više definisan
  

insertAdjacentHTML()

Ovaj metod služi da ubaci zadati HTML kod na određenu poziciju u odnosu na elemenat.

Pozicija se zadaje kao tekst i može biti jedna od sledećih:

• 'afterbegin' - na samom početku elementa
• 'beforeend' - na samom kraju elementa
• 'beforebegin' - neposredno ispred elementa, ali samo ako je elemenat unutar DOM hijerarhije i ima nadređeni element
• 'afterend' - neposredno posle elementa, ali samo ako je elemenat unutar DOM hijerarhije i ima nadređeni element

  <p>Prethodni pasus.</p>
  <div id="primer">
    <b>Originalan tekst.</b>
  </div>
  <p>Kasniji pasus.</p>

  var obj = document.getElementById("primer");
  obj.insertAdjacentHTML('beforebegin', "<h2>PODNASLOV</h2>");
  obj.insertAdjacentHTML("afterend", '<div>POSLE ELEMENTA.</div>');
  obj.insertAdjacentHTML('afterbegin', '<p>NA POČETKU.</p>');
  obj.insertAdjacentHTML("beforeend", "<p>NA KRAJU.</p>");

  <p>Prethodni pasus.</p>
  <h2>PODNASLOV</h2>
  <div id="primer">
    <p>NA POČETKU.</p>
    <b>Originalan tekst.</b>
    <p>NA KRAJU.</p>
  </div>
  <div>POSLE ELEMENTA.</div>
  <p>Kasniji pasus.</p>

Objekat HTMLElement

title

Ovo je relativno jednostavno svojstvo koje imaju HTML elementi. U pitanju je tekst koji se prikazuje kada se miš pozicionira iznad tog elementa. Ovo je nešto kao pomoć ili napomena (eng. tip) koja se vezuje za taj element.

Ako element nema definisan title, a njegov nadređeni element ima, onda i podređeni elemenat prikazuje taj isti tekst.

  var obj = document.createElement("div");
  obj.title = 'Poruka';

  document.getElementById("sek").title = "Poruka";