Proprietati si Metode utile ale elementelor HTML in JavaScript

Metode pentru obiecte HTML in JS

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.

<<-Proprietati si Metode din .. -- Proprietati si Metode elemente ..->>

Proprietati si Metode utile ale elementelor HTML in JavaScript

Curs Javascript

Proprietati ale obiectelor HTML

Metode pentru obiecte HTML in JS

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Last accessed pages

Popular pages this month