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
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Proprietati si Metode din obiectul document

Last accessed pages

  1. Limba spaniola curs online incepatori si avansati (11251)
  2. Tipuri de siruri si variabile (1305)
  3. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (25751)
  4. Scriere scripturi PHP elementare (2190)
  5. Curs PHP MySQL, Tutoriale si Scripturi PHP (9504)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2235)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (1222)
  3. Creare si editare pagini HTML (1102)
  4. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1084)
  5. Curs HTML gratuit Tutoriale HTML5 (946)