The document object model (DOM) specifica cum un browser ar trebui sa creeze

un model al unei pagini html si cum scriptul sa acceseze si sa modifice continutul

paginii.
DOM nu este parte din html si nici din javascript ci este un set separat de reguli
implementate de toate browserele si acopera doua arii:
-making a model of the html page =atunci cand browserul incarca o pagina
web creaza un model al acestei pagini in memorie.
-dom specifica modul in care browserul ar trebui sa structureze acest
model folosind un DOM tree
-DOM este numit un object model pentru ca modelul (the DOM tree)
este facut din obiecte,fiecare obiect reprezentand o parte diferita din pagina
incarcata de browser.
-accessing and changing the html page=DOM defineste metodele si
proprietatile pentru a accesa si schimba fiecare obiect in acest model,care in turn
schimba ce vede userul in browser. DOM este un API.
The DOM tree is a model of a web page
Atunci cand browserul incarcapagina creaza in memorie un model al acelei pagini
numit DOM tree. Acesta este format din 4 main type of nodes:
Reprezentarea este mai jos,sub forma de family tree
-the document node (galben) =Se gaseste la ineputul tree-ului si reprezinta
intreaga pagina (it coresponds to document object)
-element nodes (albastru) = reprezinta elementele html din pagina (h1,p
etc)
-atribute nodes (rosu) = reprezinta atributele elementelor html din pagina
(class,id etc)
-text nodes (mov) = reprezinta valoarea atributelor. Crengile care pleaca din
text node sunt copii ai elementului ce contine acel text node.
DOM TREE MAI JOS
Working with the DOM tree
Accesarea si modificarea dom treeului implica doi pasi:
-localizarea node-ului care reprezinta elementul pe care vrem sa il
modificam
-folosirea text nodeului,child elements si atribute nodes
Step 1:access the elements
Avem 3 metode de a accesa un element:
-Selectand un node individual
-getElementById() =folosind valoarea atributului ID
-querySelector() =folosind un selector css si returneaza primul
element intalnit.
-selectand mai multe node-uri:
-getElementsByClassName()= selecteaza toate elementele care au
acea clasa
 -getElementsByTagName()=selecteaza toate elementele care au
acelasi tag
-querySelectorAll()=selecteaza toate elementele in baza unui selector
css
-mergand din element in element
-parentNode=selecteaza parintele elementului curent
-previousSibling / nextSibling= selecteaza siblingul precedent sau
urmator
-firstChild / lastChild = selecteaza primul copil / ultimul copil.
Step 2:work with those elements