Curs Javascript


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.

document.getElementsByTagName('div')

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


Aplicarea unei proprietati elementelor cu acelasi tag

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.
- Functia for() parcurge fiecare element din array-ul 'elms'.

Iata un exemplu in care atunci cand se da click pe un buton, continutul din fiecare tag SPAN va fi subliniat si albastru.
<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>

getElementsByTagName() la getElementById()

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:

var elms = document.getElementById('id').getElementsByTagName('numeTag')
- se va obtine un array cu elementele 'numeTag' care sunt in obiectul cu id-ul de la 'id'.

Iata si un exemplu in care sunt doua liste <ul> diferite, iar cand este apasat un buton, va fi aplicat un stil CSS doar la tag-urile <li> de la al doilea <ul>.
<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>

getAttribute() si getElementsByTagName()

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.

Ca sa intelegeti mai bine, studiati exemplul urmator in care sunt trei etichete <span> intr-un paragraf, iar la apasarea pe un buton, va fi adaugata o culoare de fundal doar la continutul din etichete SPAN care au atributul 'data-bgr' cu aceeasi valoare.
<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>

Inregistrare evenimente la taguri HTML cand documentul este incarcat

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>.

• De exemplu, daca doriti sa preluati anumite tag-uri din pagina intr-un script JS, ori adaugati acel script dupa tag-urile respective, ori folositi DOMContentLoaded ca in urmatorul exemplu.

- In acest exemplu, dupa incarcarea documentului HTML se preiau in JS un element <input> si tag-urile LI din pagina si inregistreaza click la fiecare. Apoi, cand se da clic pe un LI, se adauga in caseta de text continutul din el.
<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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tip de <input> creaza un camp de text care trebuie sa contina doar numere?
type="text" type="number" type="date"
<input type="number" name="points" min="5" max="80" />
Ce proprietate CSS permite modificarea transparentei unui element?
font-style opacity color
#id {
  filter:alpha(opacity=40);    /* for IE */
  opacity:0.4;
}
Clic pe functia care formateaza un numar la o anumita lungime de caractere.
toPrecision() exp() toFixed()
var num = 12.84567;
alert( num.toPrecision(3) );       // 12.8
Ce functie aranjeaza aleator elementele dintr-un array?
natsort() shuffle() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
shuffle($lang);
var_export($lang);     // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
Indicati Superlativul cuvantului "good" (bun).
better best goodest
She is the best in our class.
- Ea este cea mai buna din clasa noastra.
Care este Superlativul cuvantului "bueno" (bun)?
el mejor más bueno muy bueno
Él es el mejor en nuestra clase.
- El este cel mai bun din clasa noastra.
Utilizare getElementsByTagName in JS

Last accessed pages

  1. Demonstrative (2038)
  2. Verbe - Exercitii si teste engleza incepatori (26515)
  3. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (90966)
  4. Pronumele in limba engleza - Pronouns (54017)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (122591)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (259)
  2. Exercitii engleza - English Tests and exercises - Grammar (151)
  3. Cursuri limba engleza gratuite si lectii online (121)
  4. Gramatica limbii engleze - Prezentare Generala (115)
  5. Prezentul simplu - Exercitii si teste incepatori (109)