Descriere: Lucrul cu getElementsByTagName
Download:
Autor: Anonim
Sursa (Link-ul oficial): Propria parere: Folositor.
Tutorialul:
getElementsByTagName() este o funcţie, sau metodă JavaScript care obţine şi face referire la toate elementele HTML a căror etichetă este specificată ca parametru între paranteze. De exemplu:
document.getElementsByTagName('div')
- face referire la toate tag-urile DIV din documentul HTML.
Această funcţie stochează elementele pe care le-a obţinut într-un obiect de tip Array (o matrice secvenţială), unde cheile sunt numere întregi începând de la zero. Astfel, dacă într-un document HTML sunt 3 DIV-uri şi apelăm funcţia document.getElementsByTagName('div'), aceasta va forma un obiect ce are o matrice cu 3 elemente care conţin fiecare o referinţă la câte un DIV, iar pentru a face referire la primul DIV, se scrie expresia:
document.getElementsByTagName('div')[0]
pentru al doilea DIV se foloseşte cheia [1] şi tot aşa.
Proprietăţile care pot fi folosite cu "getElementBiId()" le puteţi folosi şi cu elementele din obiectul obţinut cu "getElementsByTagName()".
Ca să înţelegeţi mai bine cum se lucrează cu această funcţie, studiaţi fiecare din exemplele de mai jos.
1. Aplicarea unei proprietăţi elementelor cu acelaşi tag
Pentru aplicarea unei proprietăţi elementelor HTML care au acelaşi tag, trebuie parcursă matricea obţinută cu metoda getElementsByTagName(). Ca formulă generală poate fi folosit următorul cod:
Cod: Selectaţi tot
var elemente = document.getElementsByTagName('numeTag');
for (var i=0; i<elemente.length; i++) {
elemente[i].proprietate;
} - Funcţia "for()" parcurge această matrice, folosind şi expresia "elemente.length" care preia numărul de elemente din matrice.
- Iar "elemente.proprietate" atribuie proprietatea dorită fiecărui element (tag).
Iată un exemplu în care atunci când se dă click pe un cuvânt special definit, conţinutul din fiecare tag SPAN va fi subliniat şi albastru
Cod: Selectaţi tot
<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>Clicku>h4>
Continut cu text incadrat in etichete SPAN:<br />
www.marplo.net : <span>Cursurispan> si <span>tutorialespan> web <span>gratuitespan>. - Când apăsaţi pe cuvântul "Click", apelează funcţia "ad_style()" căreia îi transmite ca parametru numele tag-ului (aici 'span'). Funcţia preia tag-urile din parametrul precizat, şi parcurgând matricea cu acestea, atribuie fiecăruia un stil subliniat (underline) şi culoarea albastră.
2. getElementById() şi getElementsByTagName()
Când folosiţi "getElementsByTagName(numeTag)" imediat după obiectul "document", se preia tag-urile 'numeTag' din tot documentul HTML, dar sunt cazuri când doriţi preluarea unor tag-uri dintr-o anumită porţiune a paginii, cum ar fi de exemplu dintr-un DIV sau UL. În acest caz, adăugaţi acelui element HTML un ID (în care se află tag-urile respective) şi în codul JS definiţi un obiect cu acesta folosind metoda "getElementById(ID)", apoi la acest obiect aplicaţi funcţia "getElementsByTagName()".
Sintaxa generală e următoarea:
var variabila = document.getElementById(ID).getElementsByTagName(numeTag)
- "numeTag" fiind tag-urile care vor fi preluate şi care se află în cadrul etichetei HTML care are id-ul "ID".
- Acestea vor fi stocate în "variabila" sub formă de matrice, pe care o puteţi parcurge cu o funcţie "for()".
Iată şi un exemplu în care sunt două liste <ul> diferite, iar când este apăsat un cuvânt special definit, va fi aplicat un efect doar tag-urilor <li> a uneia din ele
Cod: Selectaţi tot
<script type="text/javascript">
function ad_style2(id, tag) {
// Obtine elementul cu id-ul din parametru 'id'
var el_id = document.getElementById(id);
// Obtine obiectul cu toate tag-urile din '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 din ul1 ...</li>
<li>Text din ul1 ...</li>
<li>Text din ul1 ...</li>
</ul>
<ul id="ul2">
<li>Text din ul2 ...</li>
<li>Text din ul2 ...</li>
<li>Text din ul2 ...</li>
</ul> 3. getAttribute() şi getElementsByTagName()
Sunt situaţii în care trebuie aplicate efecte sau proprietăţi JavaScript doar la unele elemente (care au acelaşi atribut) dintr-o grupă cu aceleaşi tag-uri. Cel mai adesea sunt cazurile în care este folosit atributul "class".
Dacă doriţi să adăugaţi un efect sau proprietate doar elementelor HTML care au aceeaşi clasă (şi acelaşi tag), folosiţi metoda getAttribute('class') în cadrul parcurgerii matricei obţinute cu "getElementsByTagName()". Ca o formulă generală ar fi următoarea:
Cod: Selectaţi tot
var elemente = document.getElementsByTagName(numeTag);
for (var i=0; i<elemente.length; i++) {
if (elemente[i].getAttribute('class')=='numeClasa') {
// Executati functia sau codul dorit
}
} Ca să înţelegeţi mai bine, studiaţi exemplul următor în care sunt trei etichete într-un paragraf, iar la apăsarea pe un cuvânt "Click", va fi adăugată o culoare de fundal doar conţinutului din două etichete SPAN (care au class="cls").
Cod: Selectaţi tot
<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 din 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>gratuite</span></p> 4. Preluarea tag-urilor la încărcarea paginii
Adăugând în etichetele HTML evenimentele JavaScript specifice, precum "onclick()", "onmouseover()" se poate apela o funcţie după executarea evenimentului respectiv. Precum în exemplele din această lecţie, funcţiile sunt apelate cu "onclick()"; dar pentru aceasta trebuie specificat acest atribut într-o etichetă HTML, iar tag-urile dorite sunt preluate numai după executarea evenimentului JS.
Există şi altă metodă, JavaScript are posibilitatea de preluare a tag-urilor şi stocarea evenimentelor în memorie la încărcarea paginii, lucru util când se doreşte aplicarea de proprietăţi şi efecte la încărcarea paginii, în plus nu mai trebuie adăugat evenimentul respectiv ca atribut într-o etichetă HTML.
În principiu, se atribuie unei variabile un obiect "tip funcţie" apoi această variabilă este apelată cu proprietatea window.onload care determină execuţia ei la încărcarea paginii.
Studiaţi cu atenţie codul din exemplul următor. Acesta preia valoarea atributului "class" şi conţinutul fiecărui tag din pagină la încărcarea acesteia şi pot fi afişate într-o fereastră Alert când se dă click pe ele.
Cod: Selectaţi tot
<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>
- Observaţi că nu a mai fost adăugat nici un atribut "onclick", totuşi, acesta este stocat în memorie şi când daţi click pe fiecare va apare fereastra Alert cu datele din fiecare.