WEBnSTUDY.com
Web DOM

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.

Node
nodeValue Sadržaj tekstualnih objekata
textContent Ukupni tekstualni sadržaj objekta i svih podobjekata
Element
innerHTML Celokupan HTML kod unutar elementa
outerHTML Celokupan HTML kod unutar elementa uključujući i sam element
insertAdjacentHTML(poz,HTML) Uvodi zadati HTML kod na određenu poziciju u elementu
HTMLElement
title Tekst koji se pojavljuje kao "hint" kada se mišem pređe preko elementa

Objekat Node

nodeValue

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

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.

obj.textContent = '[tekst unutar 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...

Primer


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

Sadržaj elementa ne bi bio:

Ovo je važan tekst.

Već bukvalno:
<p>Ovo je <b>važan tekst</b>.</p>

Ako bismo u HTML kodu imali npr. sledeći sadržaj:


  <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.

element.innerHTML = '[HTML kod unutar objekta]';

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.

element.outerHTML = '[HTML kod samog objekta]';

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.

Primer


  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.

element.insertAdjacentHTML('[pozicija]', '[HTML kod]');

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

Primer

Ako na početku u HTML dokumentu imamo elemente:


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

Posle izvršavanja ovih naredbi:


  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>");

Situacija u dokumentu će biti:


  <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.

element.title = "[Tekst]";

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

Primer


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

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

Pogledajte primer za celu lekciju.

  1. Mozilla Developer Network, Node
  2. Mozilla Developer Network, Element
  3. Mozilla Developer Network, HTMLElement
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.