Lucrul cu getElementsByTagName 13
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.net : <span>Cursuri</span> si <span>tutoriale</span> web <span>gratuite</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.net : Cursuri si tutoriale web gratuite.
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>gratuite</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 gratuite
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
querySelector si querySelectorAll
querySelector() si querySelectorAll() sunt doua functii JavaScript foarte utile cand se lucreaza cu elemente HTML in JavaScript.
Cu aceste functii se pot prelua in JavaScript elemente HTML selectate dupa selectori CSS („id”, „class”).
Sunt suportate de principalele navigatoare web: Mozilla Firefox 3.5+, Google Chrome, Internet Explorer 8+, Opera 10+, Safari 3.2+.
querySelector()
querySelector() returneaza primul element din document care se potriveste cu grupul de selectori specificati, sau null daca nu e gasit.
Sintaxa:
var elm = document.querySelector(‘selectori’);
– „selectori” e un sir cu unul sau mai multi selectori CSS, separati prin virgula.
– elm e variabila ce va contine obiectul cu elementul HTML.
Exemplu, codul de mai jos afiseaza o fereastra Alert cu continutul din tag-ul HTML cu id=”someid”, si cel din primul LI cu class=”aclass”.
<div id="someid">Sa ai viata buna.</div>
<ul>
<li class="aclass">Discant.net</li>
<li>Discant.net</li>
<li class="aclass">php.net</li>
</ul>
<script type="text/javascript">
var someid_cnt = document.querySelector('#someid').innerHTML;
var aclass1_cnt = document.querySelector('li.aclass').innerHTML;
alert(someid_cnt +'\n'+ aclass1_cnt);
</script>
querySelectorAll()
querySelectorAll() returneaza o lista de elemente din document care se potrivesc cu grupul de selectori specificati.
Daca sirul „selectori” contine pseudo-elemente CSS, returneaza o lista goala (navigatoarele WebKit au un „bug”: daca sirul „selectori” contine pseudo-elemente CSS, returneaza obiectul <html>).
Sintaxa:
var elementList = document.querySelectorAll(‘selectori’);
– „selectori” e un sir cu unul sau mai multi selectori CSS, separati prin virgula.
– elementList e variabila ce va contine lista cu obiectele HTML selectate.
Exemplu, creaza un Array cu continutul din tag-urile LI cu class=”sites”, si din tag-urile cu class=”note” aflate in elementul cu id=”idata”:
<ul>
<li class="sites">CoursesWeb.net</li>
<li class="sites">Discant.net</li>
<li>php.net</li>
</ul>
<div id="idata">
<span class="note">Cursuri Web Development</span>
<span class="note">querySelector si querySelectorAll</span>
</div>
<script type="text/javascript">
// preia toate tag-urile LI cu class="sites", si tag-urile cu class="note" din elementul cu id="idata"
var elm_list = document.querySelectorAll('li.sites, #idata .note');
var nr_elm = elm_list.length; // numarul de elemente din elm_list
var arr_cnt = []; // array pt. continutul din elm_list
// parcurge obiectul elm_list, si adauga in arr_cnt continutul fiecarui element
for(var i=0; i<nr_elm; i++) {
arr_cnt.push(elm_list[i].innerHTML);
}
// test, arata datele din arr_cnt
alert(arr_cnt);
</script>
– Clic pe butonul „Test” ca sa vedeti rezultatul.
Diferenta dintre querySelector() si querySelectorAll() este aceea ca querySelector() returneaza un singur obiect cu primul element HTML care se potriveste cu „selectori”, dar querySelectorAll() returneaza o lista de obiecte cu toate elementele HTML care se potrivesc cu „selectori”.
• Pentru a limita cautarea obiectelor HTML la un singur element (nu in tot documentul), se pot aplica aceste functii la un obiect cu elementul de interes.
obiectElement.querySelector(‘selectori’)
obiectElement.querySelectorAll(‘selectori’)
– Iata un alt exemplu cu querySelectorAll(), selectarea se face pe un anumit element, nu pe „document”. Cand cursorul de la mouse e pe tag-ul <a> selectat, adresa URL e adaugata intr-un anumit DIV.
<div id="seeurl">Arata adresa URL.</div>
<ul id="sites">
<li><a href="http://coursesweb.net/javascript/" title="Curs JavaScript">Curs JavaScript</a></li>
<li><a href="http://www.discant.net/" title="Cursuri Jocuri Anime">Cursuri Jocuri Anime</a></li>
</ul>
<script type="text/javascript">
// preia tag-urile A din LI adaugate in elementul cu id="idata"
var elm_list = document.getElementById('sites').querySelectorAll('li a');
var nr_elm = elm_list.length; // numar de elemente in elm_list
// parcurge obiectul elm_list
for(var i=0; i<nr_elm; i++) {
// inregistreaza eveniment onmouseover sa adauge in #seeurl adresa din "href" a fiecarui <a> selectat
elm_list[i].onmouseover = function() {
document.getElementById('seeurl').innerHTML = this.href;
}
// inregistreaza eveniment onmouseover sa adauge in #seeurl un anumit text
elm_list[i].onmouseout = function() {
document.getElementById('seeurl').innerHTML = 'Arata adresa URL.';
}
}
</script>
– Demo. Puneti cursorul de la mouse pe fiecare link.
Arata adresa URL.
- Curs JavaScript
- Cursuri Jocuri Anime