Aici gasiti o lista cu proprietati si metode utile ale obiectului document. Cod si exemple Javascript.
document.body
- returneaza obiectul cu elementul HTML <body>.<h4>Lungimea si inaltimea elementului BODY</h4> <blockquote id='resp'>width x height</blockquote> <script> var bwidth = document.body.offsetWidth; var bheight = document.body.offsetHeight; document.getElementById('resp').innerHTML = bwidth +'x'+ bheight; </script>
document.cookie
- returneaza un sir 'nume=valoare' cu cooki-urile asociate paginii curente, separate prin punct-virgula (;), sau seteaza cookie, un sir cu formatul: nume=valoare.<p>- Afiseaza fereastra alert cu cooki-urile asociate paginii.</p> <button onclick="alertCookie()">Show cookies</button> <script> document.cookie ='nume1=marplo'; document.cookie = "cookie_2=valoare"; function alertCookie(){ alert(document.cookie); } </script>
document.forms
- returneaza un array cu elementele <form> din pagina.<form id='form_1'> <input type='text' value='F-1'/> </form> <form id='form_2'> <input type='text' value='F-2'/> </form> <div id='resp'>document.forms</div> <script> var resp ='Numar de form-uri in pagina: '+ document.forms.length +', cu id-uri:'; //adauga id-urile in resp for(var i=0; i<document.forms.length; i++) resp +='<br> - '+document.forms[i].id; document.getElementById('resp').innerHTML = resp; </script>
document.head
- returneaza elementul HTML <head>.<div id='dv1'>Design definit in style adaugat din JS in document.head.</div> <script> //adauga in head element style cu proprietati css document.head.insertAdjacentHTML('beforeend', '<style>#dv1{background:#cdf0e0; color:#0000b5; padding:5px;}</style >'); </script>
document.images
- returneaza o lista cu imaginile (tag-uri <img>) din pagina.<img src='/imgs/7.gif' title='Hugs'/><br> <img src='/imgs/smile_gift.png' title='Gift'/> <div id='resp'>document.images</div> <script> var resp ='Numar de imagini in pagina: '+ document.images.length +', cu adresa src:'; //adauga adresa src in resp for(var i=0; i<document.images.length; i++) resp +='<br> - '+document.images[i].src; document.getElementById('resp').innerHTML = resp; </script>
document.links
- contine un array cu toate link-urile (tag-uri <a>) 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> <blockquote id='resp'>document.links</blockquote> <script> var resp ='Numar de link-uri in pagina: '+ document.links.length +', cu adresa href:'; //adauga adresa href in resp for(var i=0; i<document.links.length; i++) resp +='<br> - '+document.links[i].href; document.getElementById('resp').innerHTML = resp; </script>
document.referrer
- returneaza adresa URI a paginii din care a fost deschisa pagina curenta, sau sir gol daca pagina nu e deschisa cu link direct din alta.<blockquote id='resp'>document.referrer</blockquote> <script> var resp ='Pagina a fost deschisa de la: '+ document.referrer document.getElementById('resp').innerHTML = resp; </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>
document.URL
- returneaza un sir cu adresa paginii.<blockquote id='resp'>URL</blockquote> <script> var resp ='Adresa URL a paginii: '+ document.URL; document.getElementById('resp').innerHTML = resp; </script>
document.createElement('tag')
- creaza obiectul elementului specificat la parametrul 'tag'.<div id='resp'>Element de reper</div> <script> // creaza un element Div var newDiv = document.createElement('div'); //adauga continut HTML in elementl creat newDiv.innerHTML ='Continut creat cu <em>createElement()</em>.'; //obiectul cu elementul de reper var reper = document.getElementById('resp'); //adauga noul element creat in DOM, inainte de reper document.body.insertBefore(newDiv, reper); </script>
document.getElementById(id)
- preia elementul HTML care are id-ul specificat.<div id='dv1'>Exemplu cu <em>getElementById()</em></div> Continutul din #dv1 este: <blockquote id='resp'>str</blockquote> <script> //preia elementul html cu id-ul dv1 var dv1 = document.getElementById('dv1'); //preia continutul html din dv1 var dv1_cnt = dv1.innerHTML; //adauga sirul din dv1_cnt ca text in #resp document.getElementById('resp').textContent = dv1_cnt; </script>
document.getElementsByClassName('class')
- returneaza un array cu elementele HTML care au clasa 'class' specificata.<h3 class='cls'>H3 cu class='cls'</h3> <div>Div fara class.</div> <div class='cls'>Alt Div, cu clasa 'cls'</div> <blockquote id='resp'>getElementsByClassName()</blockquote> <script> //array cu elementele care au clasa .cls var ecls = document.getElementsByClassName('cls'); document.getElementById('resp').innerHTML ='Primul element cu clasa "cls" contine:<br>'+ ecls[0].innerHTML; </script>
document.getElementsByName(name)
- returneaza un array cu elementele HTML care au numele 'name' specificat (de la atributul name).<form name='up'>Formular cu name 'up'</form> <div name='down'>Un Div cu name 'down'</div> <script> var up_names = document.getElementsByName('up'); console.log(up_names[0].tagName); // FORM </script>
document.getElementsByTagName('tag')
- returneaza un array cu elementele HTML care au tag-ul specificat.<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>
document.querySelector('css_sel')
- returneaza primul element din document care se potriveste cu grupul de selectori CSS specificati, sau Null daca nu e gasit.<div id='dv1'> <div id='dv2' class='cls'>Div cu id #dv2 si class .cls.</div> <p id='p1' class='cls'>Paragraf cu id #p1 si class .cls.</p> </div> <blockquote id='resp'>document.URL</blockquote> <script> //primul element cu clasa .cls din #dv1 var elm = document.querySelector('#dv1 .cls'); //afiseaza id-ul elementului din elm. document.getElementById('resp').innerHTML ='Primul element "#dv1 .cls" are id-ul: '+ elm.id; </script>
document.querySelectorAll('css_sel')
- returneaza un array cu elementele HTML care se potrivesc cu grupul de selectori CSS specificati.<div id='dv1'> <div id='dv2' class='cls'>Div cu id #dv2 si class .cls.</div> <p id='p1' class='cls'>Paragraf cu id #p1 si class .cls.</p> </div> <blockquote id='resp'>querySelectorAll()</blockquote> <script> //array cu elementele cu clasa .cls din #dv1 var elms = document.querySelectorAll('#dv1 .cls'); var resp ='Sunt '+ elms.length +' elemente in "#dv1 .cls". Id-ul lor:'; //parcurge elementele si adauga id-ul in resp for(var i=0; i<elms.length; i++) resp +='<br>- '+ elms[i].id; document.getElementById('resp').innerHTML = resp; </script>
document.write(str)
- scrie sirul de la 'str' in pagina.<h3>Exemplu document.write()</h3> <script> document.write('Continut adaugat cu <em>document.write()</em>'); </script>
<input type="color" name="get_color" />
#some_id:hover { transform: rotate(60deg); -ms-transform: rotate(60deg); /* IE 9 */ -moz-transform: rotate(60deg); /* Firefox */ }
var maxn = Math.max(8, 4, 88, 56); alert(maxn); // 88
include_once("un_fisier.php");
Most people arrived ahead of time. - Cei mai multi oameni au sosit inainte de vreme (prea devreme).
Este fruto es buenĂsimo. - Acest fruct este extrem /nemaipomenit de bun.