getElementsByTagName('tag') este o functie, sau metoda JavaScript care obtine si face referire la toate elementele HTML cu 'tag' specificat ca argument intre paranteze.
De exemplu, urmatoarea instructiune face referire la toate tag-urile DIV din documentul HTML.
Aceasta functie returneaza un array (cu index de la 0) cu elementele pe care le-a obtinut.
Array-ul returnat poate fi parcus cu instructiunea for()
, iar la elementele din el se pot aplica proprietatile si metodele specifice obiectelor HTML in JavaScript. O lista cu acestea gasiti la pagina:
marplo.net/javascript/proprietati-metode-element-html
Pentru aplicarea unei proprietati la elementele HTML care au acelasi tag, trebuie parcurs array-ul returnat de metoda getElementsByTagName()
. Ca formula generala poate fi folosit urmatorul cod:
var elms = document.getElementsByTagName('numeTag'); for(var i=0; i<elms.length; i++) { elms[i].proprietate; }- Unde "elms" este o variabila in care e stocat array-ul cu tag-urile obtinute.
<h4>Exemplu getElementsByTagName</h4> <p>Continut cu text incadrat in etichete SPAN:<br> marplo.net : <span>Cursuri</span> si <span>tutoriale</span> web <span>gratuite</span>. </p> <p>- La clic pe urmatorul buton se vor aplica stilurile CSS: 'color' si 'text-decoration' la toate tag-urile SPAN din pagina.</p> <button id='btn1'>Style Span</button> <script> function adStyle(tag){ //array cu toate tag-urile precizate var elms = document.getElementsByTagName(tag); // Parcurge array-ul cu tag-urile for(var i=0; i<elms.length; i++){ //aplica proprietati de stil elms[i].style.color ='blue'; elms[i].style.textDecoration ='underline'; } } //la click pe #btn1 se apeleaza functia adStyle() cu argument 'span' document.getElementById('btn1').addEventListener('click', (ev)=>{ adStyle('span'); }); </script>
Cand aplicati getElementsByTagName(numeTag)
direct la obiectul document
, se preia tag-urile 'numeTag' din tot documentul HTML, dar sunt situatii cand doriti sa preluati doar tag-uri dintr-o anumita portiune a paginii, cum ar fi de exemplu dintr-un DIV. In acest caz, adaugati acelui element HTML un ID (in care se afla tag-urile respective) si in codul JS il preluati cu metoda getElementById(ID)
, iar la acest obiect aplicati getElementsByTagName()
.
Sintaxa generala e urmatoarea:
<h4>Exemplu getElementsByTagName() la getElementBiId()</h4> <ul id='ul1'> <li>ul1 - Vine urmatorul.</li> <li>ul1 - Am venit degeaba.</li> </ul> <ul id='ul2'> <li>ul2 - Eu sunt cel ce vine,</li> <li>ul2 - La mine.</li> </ul> <p>- La clic pe butonul de mai jos se vor aplica stilurile CSS: 'color' si 'text-decoration' la tag-urile LI din elementul cu id 'ul2'.</p> <button id='btn1'>Style Li</button> <script> function adStyle(id, tag){ //array cu tag-urile 'tag' din elementul cu id-ul 'id' var elms = document.getElementById(id).getElementsByTagName(tag); // Parcurge array-ul cu tag-urile for(var i=0; i<elms.length; i++){ //aplica proprietati de stil elms[i].style.color ='blue'; elms[i].style.textDecoration ='underline'; } } //la click pe #btn1 se apeleaza functia adStyle() cu argumentele pt id si tag document.getElementById('btn1').addEventListener('click', (ev)=>{ adStyle('ul2', 'li'); }); </script>
Sunt situatii in care trebuie aplicate efecte sau proprietati JavaScript doar la unele elemente (care au acelasi atribut) dintr-o grupa cu aceleasi tag-uri.
Daca doriti sa adaugati un efect sau proprietate doar elementelor HTML care au acelasi atribut (si acelasi tag), folositi metoda getAttribute('attr_name')
in cadrul parcurgerii array-ului returnat de getElementsByTagName()
.
- Ca formula generala ar fi urmatoarea:
var elms = document.getElementsByTagName('numeTag'); for(var i=0; i<elms.length; i++) { if(elms[i].getAttribute('attr_name')=='val') { // Executati functia sau codul dorit } }- Unde "val" e valoarea atributului 'attr_name' din tag-urile "numeTag" la care doriti sa aplicati un anume cod sau functie.
<h4>Exemplu getElementsByTagName() si getAttribute()</h4> <p>Continut cu text incadrat in etichete SPAN:<br> <span data-bgr='yellow'>Cursuri</span>, si <span data-bgr='yellow'>tutoriale</span> web <span data-bgr='green'>gratuite</span>.</p> <p>- La clic pe butonul de mai jos se va aplica o culoare background la tag-urile SPAN care au atributul 'data-bgr' cu valoarea 'yellow'.</p> <button id='btn1'>Add Bgr</button> <script> function adBgr(tag){ //array cu tag-urile de la 'tag' var elms = document.getElementsByTagName(tag); // Parcurge array-ul cu tag-urile for(var i=0; i<elms.length; i++){ //verifica atributul data-bgr if(elms[i].getAttribute('data-bgr') =='yellow'){ elms[i].style.background ='yellow'; } } } //la click pe #btn1 se apeleaza functia adBgr() cu argumentele pt. tag document.getElementById('btn1').addEventListener('click', (ev)=>{ adBgr('span'); }); </script>
Instructiunile JavaScript care lucreaza cu obiecte HTML din pagina e bine sa fie executate dupa incarcarea documentului HTML in DOM, deoarece JavaScript poate lucra cu elementele care sunt deja incarcate.
Puteti sa adaugati script-ul respectiv la sfarsitul documentului HTML (inainte de tag-ul de inchidere </body>), sau puteti sa folositi evenimentul DOMContentLoaded
.
DOMContentLoaded se ataseaza la obiectul document, si se executa cand toate elementele din pagina (documentul HTML) s-au incarcat in DOM, fara sa mai astepte incarcarea continutului extern (fisiere css, imagini, iframe).
- Nu functioneaza in <iframe>.
<h4>Exemplu DOMContentLoaded</h4> <p>- Dupa incarcarea documentului HTML se preia un element Input si tag-urile LI din pagina si inregistreaza click la fiecare.<br> La clic pe oricare din listele de mai jos, se va adauga in caseta input textul din el.</p> Input Text: <input type='text' id='inp1' readonly/> <ul> <li>Pacea-i Buna.</li> <li>Iertarea Fericeste.</li> <li>Iubirea-i Sfanta</li> </ul> <script> var inp1; //va contine elementul #inp1 //functie apelata la DOMContentLoaded function liClick(){ inp1 = document.getElementById('inp1'); //caseta de text #inp1 //array cu tag-urile LI var elms = document.getElementsByTagName('li'); // Parcurge array-ul cu tag-urile si inregistreaza click la fiecare for(var i=0; i<elms.length; i++){ elms[i].addEventListener('click', (ev)=>{ inp1.value = ev.target.textContent; }); } } //dupa ce se incarca documentul HTML in DOM, apeleaza functia liClick() document.addEventListener('DOMContentLoaded', liClick); </script>
<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.