Aici gasiti o lista cu proprietati si metode utile ale obiectului document. Cod si exemple Javascript.


Proprietati obiect document

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>

Metode obiect document

document.createElement('tag') - creaza obiectul elementului specificat la parametrul 'tag'. - Vedeti si tutorialul de la: marplo.net/javascript/createelement_insertbefore.html
<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. - Vedeti si tutorialul de la: marplo.net/javascript/queryselector_queryselectorall.html
<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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
Proprietati si Metode din obiectul document

Last accessed pages

  1. Proverbe, expresii si zicatori (3184)
  2. Formatare text in pagina html (7529)
  3. Coduri pt culori (13385)
  4. Titluri, Paragrafe, Un nou rand, Linie orizontala (6793)
  5. Elemente speciale meta embed marquee, object (986)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (3105)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2832)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1782)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1346)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1315)