JavaScript & DOM - Čvorovi (Nodes)

Objektni model dokumenta, ili skraćeno DOM, je model nezavisan o platformi i jeziku koji predstavlja HTML ili XML dokumente. Definiše logičku strukturu dokumenata i način na koji im aplikacijski program može pristupiti i njima upravljati. U DOM-u su svi dijelovi dokumenta poput elemenata, atributa, teksta itd., organizovani u hijerarhijsku strukturu nalik stablu. Slično porodičnom stablu u stvarnom životu koje se sastoji od roditelja i djece. U DOM terminologiji ti su pojedinačni dijelovi dokumenta poznati kao čvorovi. Objektni model dokumenta koji predstavlja HTML dokument naziva se HTML DOM. Slično tome, DOM koji predstavlja XML dokument naziva se XML DOM.

U ovoj lekciji ćemo pokriti HTML DOM koji pruža standardni interfejs za pristup i manipulaciju HTML dokumentima putem JavaScript-a. Pomoću HTML DOM-a možete koristiti JavaScript-i za izradu HTML dokumenata, kretanje kroz njihovu hijerarhijsku strukturu i dodavanje, izmjenu ili brisanje elemenata i atributa ili njihovog sadržaja itd. Gotovo svemu što se nalazi u HTML dokumentu može se pristupiti, promijeniti, izbrisati ili dodati pomoću JavaScript uz pomoć HTML DOM-a. Da biste ovo jasnije razumjeli, pogledajmo sljedeći jednostavni HTML dokument: 

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Mobile OS</h1>
    <ul>
        <li>Android</li>
        <li>iOS</li>
    </ul>
</body>
</html>

Gornji HTML dokument može biti predstavljen sljedećim DOM stablom:



Gornji dijagram prikazuje odnose roditelja i djeteta između čvorova. Najviši čvor, tj. čvor Document je korijenski čvor DOM stabla, koji ima jedno dijete, element <html>. Dok su elementi <head> i <body> podređeni čvorovi nadređenog čvora <html>. Elementi <head> i <body> su takođe braća i sestre, jer su na istom nivou. Dalje, tekstualni sadržaj unutar elementa je podređeni čvor nadređenog elementa. Tako se, na primjer, "Mobile OS" smatra podređenim čvorom <h1> koji ga sadrži, i tako dalje.

Komentari unutar HTML dokumenta takođe su čvorovi u DOM stablu, iako to ni na koji način ne utiču na vizualni prikaz dokumenta. Komentari su korisni za dokumentovanje koda, no rijetko ćete ih trebati dohvatiti i njima upravljati. HTML atributi kao što su: id, klasa, naslov, stil itd. takođe se smatraju čvorovima u DOM hijerarhiji, ali ne sudjeluju u roditeljskim / podređenim odnosima kao ostali čvorovi. Pristupa im se kao svojstvima čvora elementa koji ih sadrži.

Svaki element u HTML dokumentu kao što je slika, hiperveza, obrazac, dugme, naslov, odlomak itd. predstavljen je pomoću JavaScript objekta u DOM hijerarhiji, a svaki objekt sadrži svojstva i metode za opisivanje i manipulaciju tim objektima. Na primjer, svojstvo stila DOM elemenata može se koristiti za dobijanje ili postavljanje umetnutog stila elementa. U sljedećih nekoliko lekcija naučićemo kako pristupiti pojedinačnim elementima na web stranici i manipulisati njima, na primjer: mijenjajući njihov stil, sadržaj itd. pomoću JavaScript programa.