[Tutorial JS]DOM - Modelul Obiectului Document

#1 de Justin Bieber
Nume Tutorial:DOM - Modelul Obiectului Document
Descriere:DOM - Modelul Obiectului Document
Download:
Autor:
Sursa (Link-ul oficial):
Propria parere:Enjoy!
Tutorialul:
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>
- 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:
Imagine
Scrie răspuns

Înapoi la “Tutoriale JS”

Cine este conectat

Utilizatori răsfoind acest forum: Niciun utilizator înregistrat și 1 vizitator