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.
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.
<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>
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'.
<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.
<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).
<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.
<input type="number" name="points" min="5" max="80" />
#id {
filter:alpha(opacity=40); /* for IE */
opacity:0.4;
}var num = 12.84567; alert( num.toPrecision(3) ); // 12.8
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net"); shuffle($lang); var_export($lang); // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
She is the best in our class. - Ea este cea mai buna din clasa noastra.
Él es el mejor en nuestra clase. - El este cel mai bun din clasa noastra.