In JavaScript toate elementele dintr-o pagina web sunt considerate obiecte, si sunt organizate in mod ierarhic, pe sistemul Parinte-Copil.
Parinte este obiectul care contine alte obiecte, iar cele din interiorul lui sunt obiecte Copil. Acestea la randul lor pot contine alte elemente si astfel devin Parinti pentru acelea.
Aceasta structura ierarhica, de continere pe nivele, e cunoscuta ca DOM (Document Object Model), unde fieare obiect poate fi accesat in mod ierarhic de la primul nivel pana la el, separate cu punct ( parinte.copil ).
Obiectul window
e considerat pe primul nivel, acesta contine elementele /obiectele ferestrei: Navigator, Location, History, Document.
Obiectul document
contine elementele HTML din pagina, tag-urile, proprietatile CSS, atributele si textul, dupa cum se poate vedea in urmatoarea imagine.
Obiectul document reprezinta pagina web, in el se gasesc elementele (tag-urile HTML), atributele si continutul dintr-o pagina web.
Acesta contine proprietati si metode prin care se pot adauga, accesa, edita, sterge in mod dinamic elemente si continut in pagina.
Document apartine obiectului window
si se poate accesa prin: window.document
; dar fiindca "window" este obiectul principal, poate fi omis cand se folosesc proprietati si metode ale obiectului "document", si pot fi apelate folosind urmatoarea sintaxa.
document.write('String')
scrie sirul 'String' in pagina.O lista cu proprietati si metode utile ale obiecului document gasiti la pagina:
marplo.net/javascript/proprietati-metode-obiect-document
Obiectul document
contine numeroase proprietati pentru accesarea elementelor din pagina. Majoritatea sunt doar pentru citirea elementelor (Read only), dar sunt cateva si pentru scriere.
Iata cateva exemple.
document.URL
- returneaza un sir cu adresa paginii.
<script> var url = document.URL; document.write('URL:<br>'+ url); </script>
document.title
- returneaza si modifica titlul paginii (din tag-ul <title>).
<script> var title = document.title; document.write('Titlu:<br>'+ title); //modifica titlul (se vede la titlu din browser) document.title ='Pacea-i buna'; </script>
Proprietatile pot sa contina la randul lor obiecte care au propriile lor proprietati si metode.
• De exemplu:document.links
- contine un array cu toate link-urile (tag-uri <a>) din pagina, sub forma de obiecte. Acestea au proprietati specifice elementelor HTML, care reprezinta partile componente (atributele, textul).<a href='//marplo.net' title='MarPlo.net'>MarPlo.net</a> <ul><li><a href='//gamv.eu' title='GamV.eu'>GamV.eu</a></li></ul> <div><a href='//coursesweb.net' title='CoursesWeb.net'>CoursesWeb.net</a></div> <hr> <script> var alnk = document.links; //array cu link-urile din pagina //parcurge array-ul si afiseaza valoarea href de la fieare for(var i=0; i<alnk.length; i++) document.write('<br>'+ alnk[i].href); </script>
• Proprietatea innerHTML
apartine obiectelor HTML din document. Aceasta returneaza sau scrie continutul din elementul HTML la care e aplicata.
<a href='//marplo.net' title='MarPlo.net'>MarPlo.net</a> <ul><li><a href='//gamv.eu' title='GamV.eu'>GamV.eu</a></li></ul> <div><a href='//coursesweb.net' title='CoursesWeb.net'>CoursesWeb.net</a></div> <script> var alnk = document.links; //array cu link-urile din pagina //preia textul din primul link var txta1 = alnk[0].innerHTML; //modifica textul din primul link alnk[0].innerHTML ='Text modificat din JS'; //arata in consola textul initial console.log('Textul din primul link era: '+ txta1); </script>
Obiectul document contine numeroase metode pentru preluarea si modificarea elementelor HTML din pagina in script-uri JS.
In continuare sunt prezentate cateva exemple cu accesare si manipulare elemente HTML folosind metodele JavaScript.
document.getElementById('id')
- preia elementul HTML care are id-ul specificat.
Mai multe detalii si exemple cu getElementById() gasiti la Lectia de la pagina: marplo.net/javascript/getelementbyid.html
Exemplu, preia continutul dintr-un Div si il adauga cu proprietateatextContent
in alt element HTML.
<p id='prg1'>Exemplu cu <em>getElementById()</em></p> Continutul din #prg1 este: <span id='sp1'>str</span> <script> //preia elementul html cu id-ul prg1 var elm = document.getElementById('prg1'); //preia continutul html din elm var elm_cnt = elm.innerHTML; //adauga sirul din elm_cnt ca text in #sp1 document.getElementById('sp1').textContent = elm_cnt; </script>
getElementsByTagName('tag')
- returneaza un array cu elementele HTML care au tag-ul specificat.
Mai multe detalii si exemple cu getElementsByTagName() gasiti la Lectia de la pagina: marplo.net/javascript/getelementsbytagname.html
Exemplu, afiseaza in pagina numarul de tag-uri H3 si id-ul de la primul.<h3 id='id_elm'>Unde-s doi sunt doi de unu.</h3> <div>Div, HTML content</div> <h3>Alt tag H3</h3> <blockquote id='resp'>Pt. raspuns din JS.</blockquote> <script> //array cu tag-urile H3 var ar_h3 = document.getElementsByTagName('h3'); //adauga in #resp nr. elemente H3 si id-ul de la primul if(ar_h3.length >0){ var idh = ar_h3[0].id; //id-ul primului element din ar_h3 document.getElementById('resp').innerHTML ='Sunt '+ ar_h3.length +' elemente H3, primul are id: '+ idh; } </script>
Elementele HTML preluate in JavaScript au proprietati si metode pentru accesarea si manipularea partilor componente (atribute, stiluri css, continut).
Acestea se aplica direct la elementul respectiv.
O lista cu proprietati si metode utile ale elementelor HTML gasiti la pagina:
marplo.net/javascript/proprietati-metode-element-html
elmHtml.addEventListener('event', callback)
- apeleaza functia de la callback cand evenimentul de la 'event' este efectuat (vedeti si tutorialul de la: marplo.net/javascript/detectare-stergere-evenimente-js).<p id='prg1'>Ex. addEventListener(), clic.</p> <button id='btn1'>Clic</button> <script> //la click pe #btn1 se apeleaza o functie document.getElementById('btn1').addEventListener('click', (ev)=>{ var cnt = document.getElementById('prg1').textContent; alert(cnt); }); </script>
elmHtml.parentNode
- returneaza elementul parinte in care e inclus elmHtml.elmHtml.className
- returneaza clasa (valoarea atributului class) din elmHtml.<div class='cls_1'>Div in care e un buton: <button id='btn1'>Clic</button></div> <script> //la click pe #btn1 se apeleaza o functie (ev reprezinta un obiect cu evenimentul) document.getElementById('btn1').addEventListener('click', (ev)=>{ //preia elementul parinte (ev.target reprezinta elementul care a actionat evenimentul) var parent = ev.target.parentNode; //preia clasa var cls = parent.className; alert('Elementul parinte are class='+ cls); }); </script>
elmHtml.setAttribute('attr', 'val')
- seteaza atributul specificat 'attr' cu valoarea 'val'.elmHtml.outerHTML
- returneaza un sir HTML cu tot elementul elmHtml (toata sructura si continutul). Sau inlocuieste elmHtml cu altceva (transmis ca sir).<p id='prg1'>Pacea, Bucuria si Bunatatea construiesc Sanatatea.</p> <button id='btn1'>Clic</button> <script> //la click pe #btn1 se apeleaza o functie (ev reprezinta un obiect cu evenimentul) document.getElementById('btn1').addEventListener('click', (ev)=>{ //seteaza style la #prg1 document.getElementById('prg1').setAttribute('style', 'color:#0000e0; font-size:22px;'); //sterge butonul (ev.target reprezinta elementul care a actionat evenimentul) ev.target.outerHTML =''; }); </script>
<form action="script.php" method="post"> ... </form>
#id { background-color: #bbfeda; box-shadow: 11px 11px 5px #7878da; }
var fruits = ["mar", "cireasa", "banana"]; fruits.shift(); alert(fruits.length); // 2
if(extension_loaded("PDO") === true) echo "PDO este valabil."
Can I listen to music? - Pot asculta muzica?
Me gustan las frutas dulces. - Imi plac fructele dulci.