Lucrul cu getElementsByTagName

Publicat pe septembrie 19, 2017 de CHIFOR CORNEL IULIAN

Lucrul cu getElementsByTagName

ULTIMA LECTIE

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 functiadocument.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 metodagetElementsByTagName(). 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


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
        // Atribue proprietati de stil
        get_tags[i].style.textDecoration = 'underline';
        get_tags[i].style.color = 'blue';
    }
}

<h4 style="cursor:pointer;" onclick="ad_style('span')"><u>Click</u></h4>
Continut cu text incadrat in etichete SPAN:<br />
www.marplo.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.marplo.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.


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
        // Coloreaza si ingroasa textul
        get_tags[i].style.color = 'blue';
        get_tags[i].style.fontWeight = 'bold';
    }
}

<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 metodagetAttribute('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").


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
        // 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';
        }
    }
}

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

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

Despre CHIFOR CORNEL IULIAN

SALUT!MA NUMESC CHIFOR CORNEL IULIAN,SUNT NASCUT PE DATA DE 06.11.2001 SI IMI PLACE ENORM DOMENIILE IT SI MECANICA AUTO!DA STIU CA ACESTE DOMENII NU SE ASEAMANA DELOC DAR EU FAC DOAR CEEA CE IMI PLACE!TOCMAI DE ACEEA AM HOTARAT SA IMI FAC UN WEBSITE!DAR CA TOTI FONDATORII DE WEBSITEURI AS AVEA NEVOIE SI DE UN AJUTOR CARE SA MAI POSTEZE SI EL MACAR 2 ARTICOLE PE WEBSITE PENTRU A ECHILIBRA POSTARILE WEBSITEULUI SI A MARII NUMARUL DE VIZITATORI!ASA CA DACA TU CREZI CA ESTI CEL POTRIVIT SI AI DORII SA ITI FACI MACAR 1 ORA LIBERA PE ZI LA CALCULATOR EU TI-AS FI RECUNOSCATOR SI AM SA ITI FAC SI TIE UN WEBSITE CUM DORESTI TU!
Acest articol a fost publicat în HOME. Pune un semn de carte cu legătura permanentă.

Lasă un comentariu