DOM – Modelul Obiectului Document 5
DOM (Document Object Model) defineste o structura logica si standardizata a documentelor, o ordine prin care putem parcurge si edita elemente si continut din documente HTML sau XML.
Structura DOM este o ierarhie de obiecte, compatibila cu a limbajului JavaScript sau cu a oricarui limbaj bazat pe obiecte.
In schema urmatoare puteti vedea modelul si ierarhia obiectelor:
In ierarhia prezentata mai sus observati ca obiectele sunt structurate pe 3 nivele principale.
Obiectul „window” este considerat pe cel mai inalt nivel, urmeaza apoi obiectele de pe nivelul I, nivelul II si nivelul III.
Obiectul din nivelul 1, de exemplu „document”, contine obiectele din nivelul 2 (de ex. „forms[]) care la randul lor pot contine alte obiecte, de nivel 3 (de ex. „Buttons”). Astfel, in JavaScript, continerea este principiul conform caruia un obiect contine alt obiect. De exemplu relatia dintre obiectul „Form” si obiectul „Button” nu este una dintre clasa si subclasa, ci una intre container si continut. Prin urmare, un obiect nu poate mosteni proprietatile si metodele altui obiect.
1. Obiecte pe partea de client
Elementele principale legate de lucrul pe partea de client din JavaScript se axeaza pe ceea ce putem face cu paginile HTML, mai exact – ceea ce poate face vizitatorul cu scriptul Javascript incarcat in pagina HTML.
Primul set de obiecte are o legatura cu navigatorul si cu etichetele HTML din acesta.
Puteti accesa sau transfera continutul unei eticheta HTML (de exemplu dintr-un <div> … </div>) utilizand id-ul acesteia, folosind expresia:
- nume_var = document.getElementById(„id”).innerHTML;
- – sau
- nume_var = document.getElementById(„id”).childNodes[0].nodeValue;
– Aici, „nume_var” este o variabila care preia continutul incadrat de tag-ul HTML care are atributul id=”id”.
Pentru a schimba sau adauga continut intr-un element HTML cu un id specific, folositi expresia de mai sus in sens invers, adica:
- document.getElementById(„id”).innerHTML = „continut”
Unde „id” este valoarea atributului „id” din etiheta HTML respectiva iar „continut” este continutul (text, tag-uri) care va fi adaugat in aceasta eticheta HTML (va inlocui orice alt context care se afla in cadrul acestui element HTML).
Majoritatea obiectelor JavaScript din nivelul 2 sunt vazute ca obiecte ale tag-urilor HTML, dupa cum puteti observa in lista de mai jos, in care sunt prezentate obiectele JavaScript si etichetele HTML corespunzatoare:
- Button – <input type=”button”>
Checkbox – <input type=”checkbox”>
Hidden – <input type=”hidden”>
Fileupload – <input type=”file”>
Password – <input type=”password”>
Radio – <input type=”radio”>
Reset – <input type=”reset”>
Select – <select>
Frame – <frame>
Document – <body>
Layer – <layer> sau <ilayer>
Link – <a href=””>
Image – <img>
Area – <map>
Anchor – <a name=””>
Applet – <applet>
Plugin – <embed>
Form – <form>
Submit – <input type=”submit”>
Text – <input type=”text”>
Textarea – <textarea>
Option – <option>
2. Exemplu script
Urmatorul script este un exemplu practic de folosire a ierarhiei DOM din JavaScript si elementele HTML.
Cu ajutorul acestui script puteti prelua datele (textul) din interiorul unui „<div> … </div>” pentru a le adauga intr-o caseta <textarea>, astfel aceste date pot fi usor trimise la un script PHP.
<html>
<head>
<title>Script JS</title>
<script type=”text/javascript”>
<!–
function CitesteDiv(){
valDiv = document.getElementById(„div_id”).childNodes[0].nodeValue;
document.formular.text.value = valDiv;
}
// –>
</script>
</head>
<body>
<div id=”div_id”>Aici este textul din interiorul Div-ului</div>
<form action=”fisier.php” method=”post” name=”formular”>
<textarea cols=”30″ rows=”5″ name=”text” id=”textul”></textarea> <br>
<input type=”button” value=”Adauga” onclick=”CitesteDiv();” />
<input type=”submit” value=”Trimite” />
</form>
</body>
</html>
– Am definit functia „CitesteDiv()” care va fi apelata la apasare butonului „Adauga”. In interiorul acestei functii avem variabila „valDiv” care (prin codul „document.getElementById(„div_id”).childNodes[0].nodeValue;„) preia continutul din elementul HTML „<div>” cu id-ul „div_id„, apoi codul („document.formular.text.value„) defineste valoarea casetei (cu atributul name=”text”) din formular egala cu valoarea variabilei „valDiv”.
Acest cod va afisa in pagina urmatorul rezultat:
Aici este textul din interiorul Div-ului
– Daca apasati butonul „Adauga”, textul din interiorul etichetei <div> … </div> va fi introdus in formular cara apoi prin apasarea butonului „Trimite” poate fi trimis la un script PHP (aici „fisier.php”).
– Exemplu 2
Iata un alt exemplu, cu o actiune inversa celui de sus. Adica, textul introdus intr-un camp textarea, dupa apasarea unui buton va fi inclus in pagina in cadrul unei etichete HTML <div>, fara ca pagina sa fie reincarcata.
Retineti, aceasta actiune este pe partea de client, vizibila doar de utilizatorul actual, nu modifica pagina originala de pe server si dupa inchiderea navigatorului textul introdus dispare.
<html>
<head>
<title>Script JS</title>
<script type=”text/javascript”>
<!–
function ScrieDiv(){
valText = document.formular2.text2.value;
document.getElementById(„div_id2”).innerHTML = valText;
}
// –>
</script>
</head>
<body>
<div id=”div_id2″>Aici va apare textul din formular</div><br>
<form name=”formular2″>
<textarea cols=”30″ rows=”5″ name=”text2″ id=”textul2″></textarea> <br>
<input type=”button” value=”Afiseaza” onclick=”ScrieDiv();” />
</form>
</body>
</html>
– Am definit functia „ScrieDiv()” care va fi apelata la apasare butonului „Afiseaza”. In interiorul acestei functii avem variabila „valText” care (prin codul „document.formular2.text2.value„) preia sirul adaugat in campul „text2” din formular, apoi, prin comanda „document.getElementById(„div_id2”).innerHTML” transfera si afiseaza sirul in cadrul etichetei <div>, inlocuindu-l pe cel existent.
Acest cod va afisa in pagina urmatorul rezultat:
Aici va apare textul din formular
– Adaugati orice text in campul din formular apoi apasati butonul „Afiseaza”, veti vedea rezultatul.
Aici am folosit exemple cu DIV, dar puteti folosi in mod similar si pentru alte tag-uri HTML, cum sunt: <p> , <ul> , <h2> , <h3> , <span> , si altele; important fiind atributul „id” si valoarea acestuia.