BAZA ZNANJA

Kurs: - Core JavaScript Programming

Modul: Rukovanje objektima

Autor: Vladimir Marić

Naziv jedinice: Rukovanje HTML objektima

U prethodnoj lekciji, govorili smo o DOM-u i upoznali se sa njegovim osobenostima kroz objekte najvišeg nivoa. Radili smo sa prozorima i stvarima vezanim za dokumente, ali ne i sa samim sadržajem dokumenata. To nije zato što DOM ne podržava takav rad, već naprotiv, zato što rukovanje HTML sadržajem na dokumentima zahteva posebnu pažnju u obradi DOM-a (praktično, HTML DOM zapravo i jeste pravi DOM objekat, za razliku od window, location, history, koji su načelno JavaScript objekti).

Rekli smo na početku prošle lekcije da se cela DOM struktura sastoji od nodova, te da razlikujemo elemente, atribute i sadržaj elemenata, kao i da svaki od tih elemenata može biti nečiji roditelj ili nečije dete.

Znamo da HTML dokument počinje html Tag-om, što je koren i element svakog HTML dokumenta. Zatim, poseduje head i body Tag-ove, što su deca HTML elementa. Na kraju, svaki podelement (npr. div) u body Tag-u, može sadržati neki tekst. Osnovni cilj HTML DOM-a je upravo dolazak do određenih sadržaja (tekstova, vrednosti i atributa) vezanih za određene elemente dokumenta.

Pogledajmo primer:

<div id="mojID">Tekst, proba</div>
<script>
document.write(document.getElementById("mojID").innerHTML);
</script>

U primeru, tekst „Tekst, proba” biće emitovan dva puta. Jednom, putem DIV HTML Tag-a, a drugi put, tako što ćemo uz pomoć JavaScripta pronaći određeni element i emitovati njegov sadržaj. Osobenosti koje se u ovom primeru vide, jesu, da div Tag poseduje atribut koji se zove id, bez čega bi nemoguće bilo pronaći ga na ovaj način. Zatim, da smo za pronalaženje HTML elementa na strani upotrebili metod getElementById() objekta document, te da smo za pronalaženje samog sadržaja pronađenog elementa upotrebili svojstvo innerHTML, pomenutog metoda. Primećujemo da je prvo kodiran HTML pa tek onda JavaScript. To je zato što u suprotnom, JavaScript ne bi bio u stanju da vidi HTML Tag-ove (jer još uvek ne bi bili iscrtani).

Razdvojimo sada ove komponente i obradimo svaku posebno:

Pronalaženje elemenata

getElementById()
Ovaj metod objekta document  ustvari, vraća kao rezultat html objekat (nod). To znači da, ukoliko želimo da vršimo neku ozbiljniju aktivnost na nodu, možemo inicijalizovati objekat, a zatim rukovati njime kroz promenljivu:

<div id="mojID">Tekst, proba</div>
<script>
var mojObjekat = document.getElementById("mojID");
document.write(mojObjekat.innerHTML);
</script>

Ovaj metod nije jedini koji možemo iskoristiti za traženje elemenata po strani. Takođe, možemo iskoristiti i getElementsByName().

Ovaj metod vraća niz elemenata koji imaju atribut name, čija vrednost se poklapa sa parametrom metoda. Treba obratiti pažnju da nemaju svi elementi atribut name, već samo neki.

Na primer, elementi HTML formi:

<input type="text" name="mojeIme" value="Tekst, proba">
<script>
var mojObjekat = document.getElementsByName("mojeIme");
document.write(mojObjekat[0].value);
</script>

S obzirom na to da je rezultat metode niz objekata, pojedinačnim objektima moramo se obraćati kao članovima niza - sa brojem indeksa u uglastim zagradama.

Konačno, poslednji iz “getElement” serije metode je metoda getElementsByTagName().

Ova metoda daje rezultat identičan prethodnom (niz objekata), ali kao uslove pretrage uzima određeni naziv (tip) Tag-a. Sledeći primer će, zato, biti validan i pored toga što div Tag-ovi nemaju nikakvu jedinstvenu identifikaciju.

<div>Tekst, proba</div>
<div>Tekst, proba1</div> 
<script>
var mojObjekat = document.getElementsByTagName("div");
document.write(mojObjekat[0].innerHTML);
</script>

Rukovanje nodovima

Nakon pronalaženja određenog noda, uz pomoć nekog od pomenutih metoda, pretpostavka je da ćemo na tom nodu nešto želeti da uradimo ili da preuzmemo neke njegove vrednosti ili da smestimo neke vrednosti u njega. Već smo se upoznali sa svojstvom innerHTML. Ovo svojstvo predstavlja sadržaj nekog noda (identično svojstvo naziva se različito u dva pretraživača IE: innerHTML , FF: innerText). Svojstvo innerHTML funkcioniše u “oba smera” i isto kao što smo do sada u primerima preuzimali sadržaj Tag-a, tako možemo i uneti sadržaj u Tag.

<div id="mojNOD">Tekst, proba</div>
<script>
var mojObjekat = document.getElementById("mojNOD");
mojObjekat.innerHTML="Ovaj sadrzaj pregazice stari sadrzaj";
</script>

Postavljanje i preuzimanje atributa

Preuzimanje vrednosti određenog atributa (sve dok znamo njegovo ime), prilično je jednostavno:

<div id="mojNOD">Tekst, proba</div>
<script>
var mojObjekat = document.getElementById("mojNOD");
document.write(mojObjekat.getAttribute("id"));
</script>

a postavljanje čak i jednostavnije.

<div id="mojNOD">Tekst, proba</div>
<script>
var mojObjekat = document.getElementById("mojNOD");
mojObjekat.setAttribute("id", "noviAtribut");
document.write(mojObjekat.getAttribute("id"));
</script>

Kretanje kroz hijerarhiju

Znamo da je hijerarhija u HTML dokumentima bazirana po principu dece i roditelja. To znači da se, od trenutnog noda, možemo kretati samo u dva pravca, gore ili dole. Odnosno, ka roditelju nodu ili ka detetu nodu. Pogledajmo kretanje kroz decu nodove:

<div id="mojNOD">
    <div id="deteNod">
        Tekst proba 1
    </div>
    <div id="deteNod1">
        Tekst proba 2
    </div>
</div>
<script>
var mojObjekat = document.getElementById("mojNOD");
for(i=0;i<mojObjekat.childNodes.length;i++)
{
     document.write(mojObjekat.childNodes[i].innerHTML);
}
</script>

U ovom primeru, prvo smo u HTML delu napravili tri Tag-a. Jedan roditelj Tag i dva deteta Tag-a, zatim smo upotrebili getElementById() metod, kako bi došli do željenog noda, da bi konačno petljom prošli kroz decu tog noda, svojstvom childNodes. U iteraciji petlje, preuzeti dete-objekat, ima osobine bilo kog drugog objekta.

Na sličan način, možemo doći i do roditeljskog noda:

<div id="roditeljNod">
    <div id="deteNod">
        Tekst proba 1
    </div>
</div>
<script>
var mojObjekat = document.getElementById("deteNod");
document.write(mojObjekat.parentNode.innerHTML);
</script>

Pri tome, naravno, u innerHTML spadaju i deca roditeljskog objekta.

U rukovanju DOM hijerarhijom, često se susrećemo sa dva problema: prvi je kako da se obratimo nekom Tag-u koji se nalazi unutar drugog Tag-a ili više njih, a da pri tom ne znamo identifikatore tih Tag-ova, a drugi, kako da se obratimo “bratskom” Tag-u u okviru jednog roditelja.

Za prvi problem možemo upotrebiti sledeće rešenje:

<div id="roditeljNod">
    <div id="deteNod1">
        <div id="deteNod2">
            <div id="deteNod3">
                 Najnizi nivo
            </div>
        </div>
    </div>
</div>
<script>
var mojObjekat = document.getElementById("roditeljNod"); 
var tmp = mojObjekat.childNodes[0];
while(true)
{
    if(tmp.childNodes[0]!=null)
    {
        tmp = tmp.childNodes[0];
    }
    else
    break;
}
document.write(tmp.nodeValue); 

Ovaj primer prolazi kroz svu decu Tag-ove jednog Tag-a i nakon što dođe do poslednjeg, ispisuje njegov sadržaj.

Do “brata” noda, može se doći ovako:

<div>
    <div id="deteNod1">
      Prvo dete
    </div>
    <div>
      Drugo dete
    </div>
</div>
<script>
var mojObjekat = document.getElementById("deteNod1"); 
var bratNod = mojObjekat.parentNode.childNodes[1];
document.write(bratNod.innerHTML);
</script>

Jednostavno, identifikovali smo aktuelni nod, zatim pronašli roditeljski nod tog noda, a zatim, identifikovali drugo dete u nizu roditeljskog noda. U primeru aktuelni nod tražimo preko identifikacije, ali to nije obavezno. Obično je slučaj da se brat nod traži od strane drugog brata noda, pa tako nod koji traži može proslediti sebe kao aktuelni objekat. U tom slučaju, mehanizam za pretraživanje možemo postaviti u funkciju, koja će kao parametar primati objekat čiju braću je potrebno naći.

<div>
    <div onclick="prikaziBrata(this)">
      Prvo dete
    </div>
    <div>
      Drugo dete
    </div>
</div>
<script>
function prikaziBrata(objekat)
{
var bratNod = objekat.parentNode.childNodes[1];
document.write(bratNod.innerHTML);
}
</script>

JavaScript ima i neke već ugrađene identifikatore objekata, pa je tako moguće promeniti neke atribute i bez prethodnog traženja.

Na primer:

<body>
<script>
document.body.bgColor="Red";
</script>
</body>

Vežba 1

Problem:

Potrebno je napraviti funkciju ($), koja će na osnovu unetog ID-a, vratiti dom objekat (na primer ( var obj = $(“mojId”); ).

Rešenje:

var $ = function(id)
{
    return document.getElementById(id);
}
//test
$("myId").innerHTML="Pozdrav";

Vežba 2

Problem:

Potrebno je kreirati funkciju koja će vraćati niz svih dom objekata određene klase.

Rešenje:

function getByClass(class)
{
    var all = document.getElementsByTagName("*");
    var rez = [];
    for(var i=0;i<all.length;i++)
        {
            if(all[i].getAttribute("class")==class)
                rez.push(all[i]);
        }   
    return rez;
}
//test
var byClass = getByClass("taster");
for(var i=0;i<byClass.length;i++)
    byClass[i].innerHTML="pozdrav";

Vežba 3

Problem:

Potrebno je kreirati funkciju koja će kreirati i dodati element određenom elementu u postojećem dokumentu. Parametri funkcije treba da budu tip, sadržaj i roditeljski element.

function addElement(type,content,parent)
{
    var el = document.createElement(type);
    el.innerHTML = content;
    parent.appendChild(el);
}
//test
addElement("div","pozdrav iz js-a",document.body);

Najvažnije iz lekcije

1. Objektima na HTML strani rukuje se putem document DOM objekta.
2. Metode za traženje elemenata na strani su getElementBy... metode.
3. Svaki HTML objekat na strani poseduje svojstva i metode poput svih drugih objekata.
4. Kroz hijerarhiju HTML dokumenta moguće je kretati se uz pomoć svojstava childElements i parentNode.
5. Moguće je čitati i menjati vrednost atributa u HTML dokumentu.
6. Sadržaj nekog elementa možemo postaviti ili pročitati sa svojstvom innerHTML ili innerText.