Curs Javascript


Aici gasiti o lista cu proprietati si metode utile ale obiectelor HTML care pot fi folosite in script-uri Javascript. Coduri JS si exemple ce pot fi testate.


Proprietati ale obiectelor HTML

elm.attributes - returneaza un obiect cu proprietati 'name', 'value' cu atributele adaugate in elementul html respectiv. 
<p id='prg1' data-val='some_val'>Exemplu cu elm.attributes. Acest Div contine attributele:</p>

<blockquote id='resp'>attributes</blockquote>
<script>
var elm = document.getElementById('prg1');

//preia atributele din elm
var attr = elm.attributes;

//traverseaza obiectul cu attributele si adauga nume=valoare in resp
var resp ='';
for(var i=0; i<attr.length; i++) resp += attr[i].name +' = '+ attr[i].value +'<br>';

document.getElementById('resp').innerHTML = resp;
</script>
elm.classList - contine o colectie de metode pentru lucru cu clase CSS la elementul HTML. - Vedeti si tutorialul de la: marplo.net/javascript/classlist-lucru-clase-css 
<style>
.cls1 {
color:#0000ed;
}
.cls2 {
font-size:18px;
font-weight:700;
}
</style>

<p id='prg1'>Exemplu cu classList. La click pe butoane se adauga /sterge clase css din acest paragraf.</p>
 <button id='btn1'>Add cls1 - cls2</button> / <button id='btn2'>Remove cls2</button>

<script>
var elm = document.getElementById('prg1');

//la click pe #btn1 aplica classList.add()
document.getElementById('btn1').addEventListener('click', (ev)=>{
 elm.classList.add('cls1', 'cls2');
});

//la click pe #btn2 aplica classList.remove()
document.getElementById('btn2').addEventListener('click', (ev)=>{
 elm.classList.remove('cls2');
});
</script>
elm.id - returneaza id-ul elementului HTML. 
<p id='prg1' class='cls1'>Acest paragraf cu class .cls1 are id-ul:</p>

<blockquote id='resp'>Response from JS.</blockquote>
<script>
var elm = document.querySelector('.cls1');
document.getElementById('resp').innerHTML = elm.id;
</script>
elm.innerHTML - returneaza sau inlocuieste continutul HTML din 'elm'. 
 <a id='lnk1' href='//marplo.net' title='MarPlo.net'><em>MarPlo.net</em></a>
<ul><li><a href='//gamv.eu' title='GamV.eu'>GamV.eu</a></li></ul>

<script>
var lnk1 = document.getElementById('lnk1');

//preia continutul html din #lnk1
var cnt = lnk1.innerHTML;

//modifica continutul din lnk1
lnk1.innerHTML ='Continut adaugat cu <em>innerHTML</em>';

//arata in consola continutul initial
console.log('Continut din #lnk1 era: '+ cnt);
</script>
elm.offsetHeight - returneaza inaltimea elementului in pixeli. 
<div style='background:#cce8cc; font-size:17px;' id='dv1'>Ex.: offsetHeight.<br>
 - Inaltimea acestui Div e: <em id='resp'>elm.offsetHeight</em></div>

<script>
var elm = document.getElementById('dv1');
document.getElementById('resp').innerHTML = elm.offsetHeight +'px';
</script>
elm.offsetWidth - returneaza lungimea elementului in pixeli. 
<div style='background:#cce8cc; font-size:17px; margin:5px 10%;' id='dv1'>Ex.: offsetWidth.<br>
 - Lungimea acestui Div e: <em id='resp'>elm.offsetWidth</em></div>

<script>
var elm = document.getElementById('dv1');
document.getElementById('resp').innerHTML = elm.offsetWidth +'px';
</script>
elm.outerHTML - returneaza un sir HTML cu tot elementul 'elm' (toata sructura si continutul). Sau inlocuieste 'elm' cu altceva (transmis ca sir). 
<h3>Pacea, Bucuria si Bunatatea construiesc Sanatatea.</h3>
<div>La click pe buton, il preia ca sir cu outerHTML si il sterge, apoi afiseaza in consola sirul preluat.</div>
<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)=>{
 //ev.target reprezinta elementul care a actionat evenimentul
 var str_btn = ev.target.outerHTML;

 //sterge butonul
 ev.target.outerHTML ='';

 console.log(str_btn);
});
</script>
elm.parentNode - returneaza elementul parinte. 
<div id='dv1'>Exemplu cu parentNode
<p id='prg1'>Id-ul elementului parinte este: <strong id='resp'>elm.parentNode.id</strong></p>
</div>

<script>
var parent = document.getElementById('prg1').parentNode;
document.getElementById('resp').innerHTML = parent.id;
</script>
elm.style.cssProp - seteaza stilul CSS specificat la cssProp cu valoarea transmisa ca sir. 
<p id='prg1'>Exemplu cu elm.style.<br>
Proprietati css setate din JavaScript.</p>

<script>
var elm = document.getElementById('prg1');
elm.style.background ='#cce9cc';
elm.style.fontSize ='18px';
elm.style.margin ='8px 10%';
elm.style.padding ='5px';
</script>
elm.tagName - returneaza numele tag-ului (DIV, P, H3, etc.). 
<div id='dv1'>Exemplu cu tagName.<br>
Acest element e un: <em id='resp'>elm.tagName</em></div>

<script>
var elm = document.getElementById('dv1');
document.getElementById('resp').innerHTML = elm.tagName;
</script>
elm.textContent - returneaza continutul de tip text din elementul HTML, fara tag-uri (sterge tag-urile), sau inlocuieste continutul cu un sir text. 
<p>La click pe buton: adauga in #dv1 un sir HTML (cu innerHTML), apoi adauga acelasi sir cu textContent in #resp.<br>
<button id='btn1'>Clic</button></p>

<div id='dv1'> #dv1 - innerHTML</div>
<blockquote id='resp'>#resp - textContent</blockquote>
<script>
var str ='<h3>Pacea, Bucuria si Bunatatea construiesc Sanatatea</h3>';

//la click pe #btn1 se apeleaza o functie
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('dv1').innerHTML = str;
 document.getElementById('resp').textContent = str;
});
</script>

Metode pentru obiecte HTML in JS

elm.addEventListener('event', callback) - apeleaza functia de la callback cand se efectueaza evenimentul 'event' specificat. 
<p id='prg1'>Ex. addEventListener(), click.</p>
 <button id='btn1'>Clic</button>

<script>
var callF =(ev)=>{
 var cnt = document.getElementById('prg1').textContent;
 alert(cnt);
}

//la click pe #btn1 se apeleaza functia callF
document.getElementById('btn1').addEventListener('click', callF);
</script>
elm.insertAdjacentHTML('pos', string) - adauga continutul de la 'string' la pozitia specificata 'pos' raportata la elementul 'elm'. - Vedeti si tutorialul: marplo.net/javascript/insertadjacenthtml 
<div id="dv1"> #dv1, https://marplo.net/</div><br>
<p>La clic pe buton adauga cu insertAdjacentHTML() continut HTML inainte de Div-ul #dv1.</p>
 <button id='btn1'>Click</button>

<script>
var dv1 = document.getElementById('dv1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var cnt = '<em> Website: </em>';
 dv1.insertAdjacentHTML('beforebegin', cnt);
});
</script>
elm.insertAdjacentText('pos', text) - adauga sirul de la 'text' la pozitia specificata 'pos' raportata la elementul 'elm'. Daca sirul e cu tag-uri, le adauga ca text asa cum sunt. 
<div id="dv1"> #dv1, https://gamv.eu/</div><br>
<p>La clic pe buton adauga un sir text in interiorul Div-ului #dv1, la sfarsit.</p>
 <button id='btn1'>Click</button>

<script>
var dv1 = document.getElementById('dv1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var cnt = '<em class="cls"> Games </em>';
 dv1.insertAdjacentText('beforeend', cnt);
});
</script>
elm.getAttribute('attr') - returneaza valoarea atributului specificat. 
<p id='prg1' data-val='some_val'>Exemplu cu getAttribute().<br>
 - Valoarea atributului 'data-val' e: <em id='resp'>elm.getAttribute()</em></p>

<script>
var elm = document.getElementById('prg1');
document.getElementById('resp').innerHTML = elm.getAttribute('data-val');
</script>
elm.matches(css_sel) - returneaza True daca elementul 'elm' se potriveste cu selectorul css specificat, in caz contrar, False. 
<div id='dv1'>Ex.: elm.matches().
<p id='prg1' class='pcls'>Acest paragraf <strong id='resp'>matches()</strong> se potriveste cu selectorul: '#dv1 .pcls'.</p>
</div>

<script>
var elm = document.getElementById('prg1');

//adauga in #resp: DA pt. True, sau NU pt. False
document.getElementById('resp').innerHTML = elm.matches('#dv1 .pcls') ?'DA' :'NU';
</script>
elm.querySelector('css_sel') - returneaza primul element din interiorul lui 'elm' 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>Primul element din #dv1 cu class .cls are id-ul: <em id='resp'>querySelector()</em></blockquote>
<script>
var elm = document.getElementById('dv1');

//primul element cu clasa .cls din elm
var ecls = elm.querySelector('.cls');

//afiseaza id-ul elementului din ecls
document.getElementById('resp').innerHTML =' '+ ecls.id;
</script>
elm.querySelectorAll('css_sel') - returneaza un array cu elementele HTML din 'elm' 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>
var elm = document.getElementById('dv1');

//array cu elementele cu clasa .cls din elm
var ecls = elm.querySelectorAll('.cls');

var resp ='Sunt '+ ecls.length +' elemente in #dv1 cu class .cls. Id-ul lor:';

//parcurge elementele si adauga id-ul in resp
for(var i=0; i<ecls.length; i++) resp +='<br>- '+ ecls[i].id;

document.getElementById('resp').innerHTML = resp;
</script>
elm.removeAttribute('attr') - sterge atributul specificat. 
<p id='prg1' style='background:#cce9cc; font-weight:700;'>Exemplu cu removeAttribute().<br>
 - La click pe buton elimina atributul 'style' din acest elm.</p>
 <button id='btn1'>Remove style</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('prg1').removeAttribute('style');
});
</script>
elm.scrollIntoView() - face scroll la elementul la care e atasata (il aduce in zona vizibila). - Acesta metoda poate sa contina argumente pt. setarea scroll-ului, vedeti documentatia: element.scrollIntoView(). 
<p id='prg1' style='margin:5px 5px 1110px 8px'>Ex.: scrollIntoView().<br>
 - La click pe buton face scroll (cu modul 'smooth') la elementul #resp.
 <button id='btn1'>Click</button></p>

<h3 id='resp' style='margin-bottom;35px;'> - Si ce daca, nu inseamna nimic!</h3>
<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').scrollIntoView({behavior:'smooth'});
});
</script>
elm.setAttribute('attr', 'val') - seteaza atributul specificat 'attr' cu valoarea 'val'. 
<p id='prg1'>Exemplu cu setAttribute().<br>
 - La click pe button, seteaza atribut 'style' cu proprietati css in acest elm.</p>
 <button id='btn1'>Set style</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var scss ='background:#cce9cc; font-weight:700;';
 document.getElementById('prg1').setAttribute('style', scss);
});
</script>

O lista intreaga cu proprietati si metode ale elementelor HTML in JavaScript gasiti la MDN: Element - Proprietati, Metode.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Proprietati si Metode utile ale elementelor HTML in JavaScript

Last accessed pages

  1. Trecut nedefinit (2462)
  2. Prezentul simplu - Exercitii si teste incepatori (68669)
  3. Trecutul continuu - Exercitii si teste incepatori (13283)
  4. Trecut nedefinit vs Imperfect (3591)
  5. Titluri, Paragrafe, Un nou rand, Linie orizontala (32536)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (957)
  2. Gramatica limbii engleze - Prezentare Generala (623)
  3. Exercitii engleza - English Tests and exercises - Grammar (556)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (452)
  5. Coduri pt culori (363)