Modelul Obiectului Document

Elektro_Love · Administrator Data inscrierii: 21/Iul/2010 Mesaje: 101

DOM 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 exemplarul si ierarhia obiectelor:

Modelul Obiectului Document șablonul Obiectului Document

Modelul Obiectului Document șablonul Obiectului Document

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 grad 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 porțiunea de client

Elementele principale legate de lucrul pe componentă 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 altera 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 susținerea 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.

Citat:

<html>
<head>
<title>Script JS</title>
<script type="text/javascript">

</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 presare 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".

- 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 adăugat in pagina in cadrul unei etichete HTML <div>, fara ca pagina sa fie reincarcata.
Retineti, aceasta actiune este pe fracțiune de client, vizibila doar de utilizatorul actual, nu modifica pagina originala de pe server si dupa inchiderea navigatorului textul introdus dispare.

Citat:

<html>
<head>
<title>Script JS</title>
<script type="text/javascript">

</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 strânsoare 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.

- 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.
_________________
[url=http://www.fodey.com/generators/animated/ninjatext.asp] Modelul Obiectului Document șablonul Obiectului Document

[/url]