Lucrul cu getElementsByTagName

Elektro_Love · Administrator Data inscrierii: 21/Iul/2010 Mesaje: 101

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 întâiul DIV, se scrie expresia: document.getElementsByTagName('div')[0] , pentru al doilea DIV se foloseste cheia [1] si tot asa.

Proprietatile care pot fi utilizate 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 întrebuințat 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 rarisim definit, continutul din fiecare tag SPAN va fi subliniat si albastru

Citat:

- Cand apasati pe cuvantul "Click", apeleaza functia "ad_style()" careia ii oferă 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 nuanță albastra.

2. getElementById() si getElementsByTagName()

Cand folositi "getElementsByTagName(numeTag)" fără întârziere dupa obiectul "document", se preia tag-urile 'numeTag' din 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".
- Astea 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 consecință doar tag-urilor <li> a uneia din ele.

Citat:

- Observati ca functia "ad_style2(id, tag)" preia doi parametri: 'id' pentru id-ul elementului de frunte 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 cele din codul script-ului.

3. getAttribute() si getElementsByTagName()

Sunt situatii in care trebuie aplicate consecințe 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 colorație de fundal doar continutului din doua etichete SPAN (care au class="cls").

Citat:

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

4. Preluarea tag-urilor la incarcarea paginii

Adaugand in etichetele HTML evenimentele JavaScript specifice, ca de pildă "onclick()", "onmouseover()" (si altele prezentate in Lectia 18), se poate apela o functie dupa executarea evenimentului respectiv. Ca de exemplu 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, fapt 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> din pagina la incarcarea acesteia si pot fi afisate intr-o fereastra Alert cand se da click pe ele.

Citat:

<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 din pagina
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 din primul LI</li>
<li class="cli">Text din al doilea LI</li>
<li class="cli">Text din 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.
_________________
[url=http://www.fodey.com/generators/animated/ninjatext.asp] Lucrul cu getElementsByTagName Lucrul cu getElementsByTagName

Lucrul cu getElementsByTagName Lucrul cu getElementsByTagName

[/url]