Accesarea arborelui DOM HTML in browser

Accesarea arborelui DOM HTML in browser

1 Noduri DOM in documentele HTML Componentele unui document HTML sunt reprezentate in DOM-ul unui document prin obiecte numite noduri. Acestea sunt instante ale obiectelor generice care implementeaza in JavaScript interfetele DOM. In arborii DOM asociati documentelor HTML, se utilizeaza urmatoarele tipuri de noduri:

Element (element, ): reprezinta elementele HTML;

Attr (atribut, ): reprezinta atributele HTML;

Text (text, ): reprezinta un fragment de text inclus intr-un element HTML nevid;

Comment (comentariu, ): reprezinta un comentariu HTML;

Document (document, ): reprezinta elementul radacina, adica html

DocumentType (tip de document, ): reprezinta definitia tipului de document.

Cele mai des utilizate tipuri de noduri sunt element, atribut si text. In subarborele DOM, care corespunde secventei de cod HTML prezentata in exemplul urmator, sunt continute doua noduri:

<p>Acesta este un paragraf</p>

Cele doua noduri sunt nodul element, reprezentand elementul HTML p si nodul text, avans continutul 'Acesta este un paragraf'. Nodul text este in interiorul nodului element, astfel incat el constituie un nod copil (descendent direct) al acestuia. In consecinta, nodul element este nodul parinte al nodului text.   

<p>Acesta este <b>numai</b> un paragraf</p> In subarborele DOM care corespunde secventei anterioare de cod, nodul element reprezentand elementul HTML p are trei copii: nodul text avand continutul 'Acesta este', nodul element     b si nodul text avand continutul 'un paragraf'. Cei trei copii sunt frati. In raport cu nodul element b, nodul text avand continutul 'Acesta este'este fratele anterior (previous sibling), iar nodul text avand continutul 'un paragraf'este fratele urmator (next sibling).    Nodul text avand continutul 'Acesta este' este primul copil (first child) al nodului element p, iar nodul text avand continutul 'un paragraf'este ultimul copil (last child) al nodului element p. La randul sau, nodul element reprezentand elementul HTML b are drept copil nodul text avand continutul 'numai'. Acest din urma nod text este un descendent indirect al nodului element asociat elementului HTML p Elementele HTML pot avea atribute, reprezentate si ele ca noduri obiect in arborele DOM. Cu toate acestea, se considera ca un obiect atribut nu apartine arborelui de noduri obiect al documentului. Mai degraba, atributele sunt vazute ca proprietati ale nodurilor element. In exemplul urmator se utilizeaza doua atribute:

<p id="primul" align="center">Acesta este <b>numai</b>

un paragraf</p> In subarborele DOM care corespunde secventei anterioare de cod HTML, nodul element corespunzator lui p are asociate nodurile atribut care corespund atributelor id si align ale elementului respectiv.   

2 Obtinerea nodurilor

Obtinerea nodurilor element Metoda getElementsByTagName()intoarce un tablou care contine toate nodurile de un anumit tip incluse in arborele DOM. In exemplul urmator, este obtinut     nodul b

var nodB = document.getElementsByTagName('b')[0];    O alta modalitate de obtinere a nodului respectiv este urmatoarea:

var nodB = document.getElementsByTagName('p')[0].lastChild; Utilizarea metodei getElementsByTagName()poate determina aparitia unor erori in urma precizarii gresite a indecsilor.    Metoda care ofera o siguranta maxima, dar si cea mai simpla modalitate pentru obtinerea unui nod inclus in arborele DOM este getElementById(). Utilizarea acestei metode presupune ca elementul HTML sa aiba un identificator unic asociat, ca in exemplul urmator:

<p id="primul" align="center">

Acesta este un <b id="elbold">paragraf</b>

</p> In aceste conditii, nodul p va putea fi obtinut astfel:

var nodP = document.getElementById('primul');

iar nodul b va fi obtinut astfel:

var nodB = document.getElementById('elbold');    Pentru obtinerea nodurilor element pot fi utilizate si proprietatile nextSibling si previousSibling ale interfetei Node. Prima proprietate intoarce nodul imediat urmator nodului curent, iar cea de-a doua intoarce nodul imediat anterior nodului curent.

Obtinerea nodurilor atribut Nodurile atribut pot fi obtinute utilizand metoda getAttributeNode()a interfetei Element. In exemplul urmator este obtinut nodul care corespunde atributului align al elementului p

var noduriP = document.getElementsByTagName('p');

var atribut = noduriP[0].getAttributeNode('align');

Obtinerea nodurilor text Pentru obtinerea nodurilor text se utilizeaza proprietatile interfetei Node firstChild lastChild). In exemplul urmator se obtine nodul text ce are continutul 'Acesta este un' Nodul text amintit este primul copil al nodului element p avand identificatorul 'primul'

var textCurent = document.getElementById('primul').firstChild;   

3 Adaugarea si eliminarea nodurilor

Crearea si adaugarea nodurilor Pentru crearea unui nod element se utilizeaza metoda createElement()a interfetei Document Pentru crearea unui nod text se utilizeaza metoda createTextNode()a interfetei Document Pentru crearea unui nod atribut se utilizeaza metoda createAttribute() Pentru adaugarea unui nod se foloseste metoda appendChild()a interfetei Node. Pe langa aceasta metoda, mai poate fi utilizata si metoda insertBefore()a interfetei Node

Eliminarea nodurilor Pentru a elimina un nod element se utilizeaza metoda removeChild()a interfetei Node Pentru a elimina un nod atribut se utilizeaza metoda removeAttribute()a interfetei Element. Pe langa aceasta metoda, mai poate fi utilizata si metoda removeAttributeNode()a interfetei Element (cu exceptia browserului Internet Explorer).

4 Accesarea si modificarea regulilor de stil inline Informatiile de stil inline atasate unui element sunt accesate prin atributul style al elementului. Acestui atribut ii corespunde in DOM interfata ElementCSSInlineStyle. Interfata nu are metode, iar singura proprietate este style, avand tipul CSSStyleDeclaration. Prin intermediul acestei proprietati pot fi consultate/schimbate stilurile utilizate de toate elementele incluse intr-un document HTML. Pentru scrierea proprietatilor de stil in declaratiile CSS se utilizeaza asa-numita dash notation (cuvinte componente separate prin cratima; ex., font-style In JavaScript se utilizeaza asa-numita camel notation (primul cuvant este scris cu minuscula, iar celelalte cu majuscula; ex., fontStyle In exemplul urmator se modifica o proprietate CSS a elementului HTML p

// Se localizeaza paragraful

para = document.getElementById('par1');

// Se modifica atributul CSS font-style

para.style.fontStyle = 'italic';    In general, o proprietate CSS a unui element se poate stabili/modifica utilizand una dintre constructiile urmatoare:

document.getElementById('id').style.numeStil = 'valoare';

document.getElementsByTagName('tag')[index].style.numeStil='valoare'

unde numeStil este numele proprietatii CSS care urmeaza a fi modificata, iar 'valoare' este noua sa valoare. DOM furnizeaza si o modalitate pentru a schimba stilurile utilizate de elementele HTML, modificand atributul class al acestora, astfel:

element.className = 'numeClasaNoua';