- Utilizare proprietati din obiectul document
- Utilizare metode din obiectul document
- Lucru cu Proprietati si Metode ale elementelor HTML in JS
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
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.numeMetoda()
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
Utilizare proprietati din obiectul 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).Urmatorul exemplu afiseaza adresa 'href' a link-urilor din pagina.
<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>
Utilizare metode din obiectul document
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>
Lucru cu Proprietati si Metode ale elementelor HTML in JS
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.
elmHtml.metoda()
O lista cu proprietati si metode utile ale elementelor HTML gasiti la pagina:
marplo.net/javascript/proprietati-metode-element-html
Exemple
•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).- Exemplu, cand se apasa clic pe butonul cu id #btn1 afiseaza o fereastra alert() cu textul din #prg1.
<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.- Exemplu, cand se apasa clic pe butonul cu id #btn1 afiseaza o fereastra alert() cu clasa din elementu parinte al butonului.
<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).- Exemplu, cand se apasa clic pe butonul cu id #btn1 seteaza atributul 'style' cu proprietati CSS la #prg1, apoi sterge butonul din pagina.
<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>