getElementsByTagName() este o functie, sau metoda JavaScript care obtine si face referire la toate elementele HTML a caror eticheta este spoecificata ca parametru intre paranteze. De exemplu:
document.getElementsByTagName('div')
- face referire la toate tag-urile DIV din documentul HTML.
Aceasta functie stocheaza elementele pe care le-a obtinut intr-un obiect de tip Array (o matrice secventiala), unde cheile sunt numere intregi incepand de la zero. Astfel, daca intr-un document HTML sunt 3 DIV-uri si apelam functia document.getElementsByTagName('div'), aceasta va forma un obiect ce are o matrice cu 3 elemente care contin fiecare o referinta la cate un DIV, iar pentru a face referire la primul DIV, se scrie expresia: document.getElementsByTagName('div')[0] , pentru al doilea DIV se foloseste cheia [1] si tot asa.

Proprietatile care pot fi folosite cu "getElementBiId()" (functie prezentata in lectia anterioara) le puteti folosi si cu elementele din obiectul obtinut cu "getElementsByTagName()".
Ca sa intelegeti mai bine cum se lucreaza cu aceasta functie, studiati fiecare din exemplele de mai jos.

1. Aplicarea unei proprietati elementelor cu acelasi tag

Pentru aplicarea unei proprietati elementelor HTML care au acelasi tag, trebuie parcursa matricea obtinuta cu metoda getElementsByTagName(). Ca formula generala poate fi folosit urmatorul cod:

var elemente = document.getElementsByTagName('numeTag');
for (var i=0; i<elemente.length; i++) {
elemente[i].proprietate;
}

- Unde "elemente" este o variabila in care e stocata matricea cu tag-urile obtinute
- Functia "for()" parcurge aceasta matrice, folosind si expresia "elemente.length" care preia numarul de elemente din matrice.
- Iar "elemente[i].proprietate" atribuie proprietatea dorita fiecarui element (tag).

Iata un exemplu in care atunci cand se da click pe un cuvant special definit, continutul din fiecare tag SPAN va fi subliniat si albastru

<script type="text/javascript">
function ad_style(tag) {
// Obtine obiectul cu toate tag-urile precizate
var get_tags = document.getElementsByTagName(tag);

// Parcurge matricea cu tag-urile
for (var i=0; i<get_tags.length; i++) {
// Atribue proprietati de stil
get_tags[i].style.textDecoration = 'underline';
get_tags[i].style.color = 'blue';
}
}
</script>
<h4 style="cursor:pointer;" onclick="ad_style('span')"><u>Click</u></h4>
Continut cu text incadrat in etichete SPAN:<br />
www.discant.ro : <span>Cursuri</span> si <span>tutoriale</span> web <span>e</span>.

- Cand apasati pe cuvantul "Click", apeleaza functia "ad_style()" careia ii transmite ca parametru numele tag-ului (aici 'span'). Functia preia tag-urile din parametrul precizat, si parcurgand matricea cu acestea, atribuie fiecaruia un stil subliniat (underline) si culoarea albastra.
- Pentru a vedea efectul, dati click pe cuvantul "Click" de jos.

Click
Continut cu text incadrat in etichete SPAN:
www.discant.ro : Cursuri si tutoriale web e.

2. getElementById() si getElementsByTagName()

Cand folositi "getElementsByTagName(numeTag)" imediat dupa obiectul "document", se preia tag-urile 'numeTag' aflate in tot documentul HTML, dar sunt cazuri cand doriti preluarea unor tag-uri dintr-o anumita portiune a paginii, cum ar fi de exemplu dintr-un DIV sau UL. In acest caz, adaugati acelui element HTML un ID (in care se afla tag-urile respective) si in codul JS definiti un obiect cu acesta folosind metoda "getElementById(ID)", apoi la acest obiect aplicati functia "getElementsByTagName()".
Sintaxa generala e urmatoarea:
var variabila = document.getElementById(ID).getElementsByTagName(numeTag)
- "numeTag" fiind tag-urile care vor fi preluate si care se afla in cadrul etichetei HTML care are id-ul "ID".
- Acestea vor fi stocate in "variabila" sub forma de matrice, pe care o puteti parcurge cu o functie "for()".

Iata si un exemplu in care sunt doua liste <ul> diferite, iar cand este apasat un cuvant special definit, va fi aplicat un efect doar tag-urilor <li> a uneia din ele.

<script type="text/javascript">
function ad_style2(id, tag) {
// Obtine elementul cu id-ul de la parametru 'id'
var el_id = document.getElementById(id);

// Obtine obiectul cu toate tag-urile in 'el_id', precizate la parametru 'tag'
var get_tags = el_id.getElementsByTagName(tag);

// Parcurge matricea cu tag-urile
for (var i=0; i<get_tags.length; i++) {
// Coloreaza si ingroasa textul
get_tags[i].style.color = 'blue';
get_tags[i].style.fontWeight = 'bold';
}
}
</script>
<h4 style="cursor:pointer;" onclick="ad_style2('ul2', 'li')"><u>Click</u></h4>
<ul id="ul1">
<li>Text in ul1 ...</li>
<li>Text in ul1 ...</li>
<li>Text in ul1 ...</li>
</ul>
<ul id="ul2">
<li>Text in ul2 ...</li>
<li>Text in ul2 ...</li>
<li>Text in ul2 ...</li>
</ul>

- Observati ca functia "ad_style2(id, tag)" preia doi parametri: 'id' pentru id-ul elementului principal in care se afla tag-urile, iar 'tag' pentru numele tag-urilor care vor fi preluate. In felul acesta puteti folosi aceeasi functia si pentru alte grupuri (id si tag) diferite.
- Explicatiile necesare sunt in codul script-ului. Pentru a vedea rezultatul, apasati pe cuvantul "Click" de mai jos

Click

Text in ul1 ...

Text in ul1 ...

Text in ul1 ...

Text in ul2 ...

Text in ul2 ...

Text in ul2 ...

3. 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. Cel mai adesea sunt cazurile in care este folosit atributul "class".
Daca doriti sa adaugati un efect sau proprietate doar elementelor HTML care au aceeasi clasa (si acelasi tag), folositi metoda getAttribute('class') in cadrul parcurgerii matricei obtinute cu "getElementsByTagName()". Ca o formula generala ar fi urmatoarea:

var elemente = document.getElementsByTagName(numeTag);
for (var i=0; i<elemente.length; i++) {
if (elemente[i].getAttribute('class')=='numeClasa') {
// Executati functia sau codul dorit
}
}

- Unde "numeClasa" e numele clasei 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 cuvant "Click", va fi adaugata o culoare de fundal doar continutului din doua etichete SPAN (care au class="cls").

<script type="text/javascript">
function ad_style3(tag, clasa) {
// Obtine obiectul cu toate tag-urile precizate
var get_tags = document.getElementsByTagName(tag);

// Parcurge matricea cu tag-urile
for (var i=0; i<get_tags.length; i++) {
// Daca elementul are clasa de la parametru 'clasa'
if (get_tags[i].getAttribute('class')==clasa) {
// Ii adauga o proprietate 'backgroundColor'
get_tags[i].style.backgroundColor = '#adfead';
}
}
}
</script>
<h4 style="cursor:pointer;" onclick="ad_style3('span', 'cls')"><u>Click</u></h4>
<p>Continut cu text incadrat in etichete SPAN:<br />
<span class="cls">Cursuri</span>, si <span class="cls">tutoriale</span> web <span>e</span></p>

- Cand apasati cuvantul "Click", este apelata functia "ad_style3(tag, clasa), aceasta primeste ca parametri numele tag-ului si al clasei la care va aplica efectul. Rezultatul il puteti vedea mai jos.

Click

Continut cu text incadrat in etichete SPAN:
Cursuri, si tutoriale web e

4. Preluarea tag-urilor la incarcarea paginii

Adaugand in etichetele HTML evenimentele JavaScript specifice, precum "onclick()", "onmouseover()" (si altele prezentate in Lectia 18), se poate apela o functie dupa executarea evenimentului respectiv. Precum in exemplele din aceasta lectie, functiile sunt apelate cu "onclick()"; dar pentru aceasta trebuie specificat acest atribut intr-o eticheta HTML, iar tag-urile dorite sunt preluate numai dupa executarea evenimentului JS.
Exista si alta metoda, JavaScript are posibilitatea de preluare a tag-urilor si stocarea evenimentelor in memorie la incarcarea paginii, lucru util cand se doreste aplicarea de proprietati si efecte la incarcarea paginii, in plus nu mai trebuie adaugat evenimentul respectiv ca atribut intr-o eticheta HTML.
In principiu, se atribuie unei variabile un obiect "tip functie" apoi aceasta variabila este apelata cu proprietatea window.onload care determina executia ei la incarcarea paginii.
Studiati cu atentie codul din exemplul urmator. Acesta preia valoarea atributului "class" si continutul fiecarui tag <li> la incarcarea paginiiu, si pot fi afisate intr-o fereastra Alert cand se da click pe ele.

<html>
<head>
<title>Preincarcarea tag-urilor</title>
<style type="text/css">
  .cli { cursor:pointer; }
</style>
<script type="text/javascript">
// Se defineste variabila cu functia obiect
var get_li = function () {
  // Preia tag-urile LI
  var tags_li = document.getElementsByTagName('li');
  var nr_li = tags_li.length;		// Obtine nr. de tag-uri LI

  // Parcurge matricea cu tag-urile
  for (i=0; i<nr_li; i++) {
    // Aplica evenimentul 'onclick' la fiecare tag, cu o functie ce trebuie executata
    tags_li[i].onclick = function () {
      var clasa = this.getAttribute('class');		// Obtine valoarea clasei
      var continut = this.textContent || this.innerText;	// Preia continutul
      alert('class='+ clasa+ ' - '+ continut);		// Defineste fereastra Alert
      return false;
     };
  }
};

// Apeleaza variabila 'get_li' la incarcarea paginii
window.onload = get_li;
</script>
</head>
<body>

<ul>
  <li class="cli">Text in primul LI</li>
  <li class="cli">Text in al doilea LI</li>
  <li class="cli">Text in al treilea LI</li>
</ul>

</body>
</html>

- Stilul CSS din HEAD este pentru schimbarea cursor-ului de mouse in "manuta" cand se afla deasupra fiecarui <li>.
- Observati ca nu a mai fost adaugat nici un atribut "onclick", totusi, acesta este stocat in memorie si cand dati click pe fiecare <li> va apare fereastra Alert cu datele din fiecare.
Puteti testa acest exemplu mai jos:

Text in primul LI

Text in al doilea LI

Text in al treilea LI