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;
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"
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>- 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".
<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>
Acest cod va afisa in pagina urmatorul rezultat:
- 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").Aici este textul din interiorul Div-ului
- 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>- 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.
<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>
Acest cod va afisa in pagina urmatorul rezultat:
- Adaugati orice text in campul din formular apoi apasati butonul "Afiseaza", veti vedea rezultatul.Aici va apare textul din formular
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.
- Mai multe detalii si exemple cu "document.getElementById("id")" gasiti la Lectia 28, Lucrul cu getElementById.