Parteneri oficiali
| JavaScript si DOM |
|
JavaScript şi DOM Acest articol vă prezintă noţiunile de bază legate de DOM. Invăţaţi să stăpâniţi acest instrument foarte puternic şi foarte util, mai ales în contextul migrării spre XHTML. De la primul contact cu web authoring-ul (prin 1997) am învăţat să mă feresc de JavaScript ca de foc. Motivul: fiecare browser îl interpreta în felul lui. Orice script mai complex avea mari secţiuni dedicate detectării browser-ului folosit, urmate de secţiuni separate pentru fiecare browser în parte. Chiar şi aşa, nu funcţionau corespunzător decât pe unele browsere. Din fericire, situaţia este pe cale să se schimbe. JavaScript JavaScript este un limbaj conceput de Netscape. Particula „Java” din nume a fost adăugată pentru a „fura” puţin din avântul pe care limbajul de la Sun îl avea în acea perioadă. Limbajul se află acum sub tutela ECMA, motiv pentru care unii îl numesc „ECMAScript” (Microsoft a numit propria implementare „JScript”). Limbajul a fost creat pentru a adăuga funcţionalitate browser-elor web (aşa-numitul „client-side scripting”), dar a evoluat într-un limbaj de scripting general. Browserele noi (Internet Explorer 6 şi versiunile recente de Mozilla şi Opera) susţin sus şi tare că suportă standardele definite de ECMA şi W3C. Din păcate însă, mici diferenţe încă mai există. DOM DOM este un pachet de interfeţe[1] conceput de W3C. Metodele[2] acestor interfeţe folosesc la manipularea informaţiilor conţinute într-un arbore XML (sau SGML). Probabil nu v-aţi gândit niciodată la un document HTML ca la un „arbore”. Să luăm un exemplu: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Acesta este titlul documentului</title> </head> <body> <h1 id="titlu_doc">Acesta este titlul documentului</h1> <p>Acesta este un paragraf de text <img src="/bullet.gif" alt="Bullet" /></p> <p>Acesta este un alt paragraf de text</p> </body> </html> Structura arborescentă asociată acestui document este: html | +-- head | | | +-- title | | | +-- "Acesta este titlul documentului" | +-- body | +-- h1 | | | +-- "Acesta este titlul documentului" | +-- p | | | +-- "Acesta este un paragraf de text " | | | +-- img | +-- p | +-- "Acesta este un alt paragraf de text" Observaţi că unele din nodurile structurii arborescente sunt elemente (html, head, title etc), iar unele sunt noduri de text ("Acesta este titlul documentului"). DOM ne permite să cautăm astfel de noduri în structura arborescentă, să le modificăm, să le ştergem, să creem altele, etc. Elementul de legătură între JavaScript şi DOM este obiectul document, ce implementează interfaţa Document din DOM. Căutarea nodurilor Pentru a putea manipula informaţia dintr-un nod trebuie ca mai întâi să obţinem o „referinţă” la acel nod. În acest scop putem folosi următoarele metode:
Dacă de exemplu dorim să obţinem o referinţă la elementul h1 din exemplul 1 ne putem folosi de id-ul acestuia: <script type="text/javascript">
titlu = document.getElementById('titlu_doc');
</script> Să presupunem însă că dorim să obţinem o referinţă la title, sau la cel de-al doilea paragraf. Acestea nu au id. <script type="text/javascript">
titlu = document.getElementsByTagName('title')[0]; paragraf = document.getElementsByTagName('p')[1];
</script> Observăm că array-urile sunt indexate începând de la zero (stil C). După ce am localizat un element, putem explora structura arborescentă începând cu acel punct, folosind proprietăţi ale obiectului precum: parentNode, firstChild, nextSibling etc. De exemplu, pentru a ajunge la nodul de text din interiorul celui de-al doilea paragraf putem folosi: <script type="text/javascript">
paragraf = document.getElementsByTagName('p')[1]; text = paragraf.fistChild;
</script> Manipularea nodurilor Odată ce am obţinut o referinţă la un element, putem să manipulăm diversele proprietăţi ale acestuia. Să presupunem că dorim să modificăm atributul src al imaginii din exemplul 1 şi dorim ca al doilea paragraf să fie scris italic. Nimic mai simplu: <script type="text/javascript">
// localizam imaginea imagine = document.getElementsByTagName('img')[0]; // modificam atributul "src" imagine.src = 'ceva.gif';
// localizam paragraful paragraf = document.getElementsByTagName('p')[1]; // modificam atributul CSS font-style paragraf.style.fontStyle = 'italic';
</script> După cum observaţi, atributele CSS se pot modifica prin intermediul proprietăţii style, modificând numele atributului de la dash notation[3] (stilul folosit în documentele CSS), la camel notation[4]. Există şi o excepţie: float. Acesta este un cuvânt rezervat în JavaScript, aşa că nu puteţi folosi element.style.float, dar puteţi folosi element.style.cssFloat[5]. Crearea de noi noduri După cum am observat în exemplul 2 există cel puţin două tipuri diferite de noduri: nodurile element şi nodurile de text. Acestea se crează folosind metodele:
Să încercăm să mai adăugăm un paragraf documentului nostru, via JavaScript. <script type="text/javascript">
// creem un nou element de tip 'p' (paragraf) paragraf = document.createElement('p');
// creem un nod de text text = document.createTextNode('Al treilea paragraf');
// atasam textul la paragraful creat anterior paragraf.appendChild(text);
// atasam paragraful la elementul body din documentul nostru document.getElementsByTagName('body')[0].appendChild(paragraf);
</script> Asta este tot. După cum cu siguranţă aţi înţeles, metoda appendChild() adaugă un nod fiu nodului pentru care este invocată. Metoda „pereche” este removeChild() care vă permite să ştergeţi un nod fiu. Probabil unii dintre voi vor argumenta că acelaşi efect poate fi obţinut introducând în cod, la locul potrivit, un apel al metodei document.write(): <script type="text/javascript">
document.write('<p>Al treilea paragraf</p>');
</script> Pare chiar mai uşor, pentru că nu trebuie să ne batem capul cu noduri şi relaţii tată/fiu între ele. Însă tocmai pentru că avem libertate totală şi putem introduce orice, chiar şi cod prost structurat, această metodă poate crea probleme serioase, în special în cazul documentelor XML. Din această cauză, funcţia nu are nici un efect în documentele XHTML (şi introducerea ei generează mesaje de eroare). În cazul XHTML, singura modalitate de a manipula structura documentelor via JavaScript este DOM. |