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
Clic pe tag-ul care creaza celula in tabel.
<tr> <span> <td>
<table></tr>
  <td>Cell-1</td><td>Cell-2</td>
</tr></table>
Indicati proprietatea CSS care adauga o imagine pentru fundal
background-color background-image color
h3 {
  background-image: url("image.jpg");
}
Ce instructiune se foloseste la parcugerea elementelor unui Array?
for() [) object()
var arr = [1, "ab", "CoursesWeb.net"];
for(var i=0; i< arr.length; i++) { alert(arr[i]); };
Indicati functia PHP utilizata la parcurgerea elementelor unui Array asociativ.
for() foreach() if()
$arr =["k1"=>"v1", "k2"=>"v2", "k3"=>"v3");
foreach($arr AS $k => $v) { echo "<br/>". $k ." - ". $v; }
Care din urmatoarele cuvinte este sinonim cu "gentle" (bland)?
meek good beautiful
He is so kind and meek.
- El este atat de amabil si bland.
Care din urmatoarele cuvinte este sinonim cu "amable" (bland, prietenos)?
hermoso fuerte manso
Tu padre tiene un carácter muy manso.
- Tatal tau are un caracter foarte bland.
Proprietati si Metode utile ale elementelor HTML in JavaScript

Last accessed pages

  1. Curs complet de limba engleza, incepatori (14556)
  2. Lectii audio-video de limba engleza (24927)
  3. Gramatica limbii engleze - Prezentare Generala (217188)
  4. Cursuri limba engleza gratuite si lectii online (66448)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (60615)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1245)
  2. Coduri pt culori (903)
  3. Cursuri limba engleza gratuite si lectii online (600)
  4. Gramatica limbii engleze - Prezentare Generala (536)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (487)