Curs Javascript


getElementsByTagName('tag') este o functie, sau metoda JavaScript care obtine si face referire la toate elementele HTML cu 'tag' specificat ca argument intre paranteze.
De exemplu, urmatoarea instructiune face referire la toate tag-urile DIV din documentul HTML.

document.getElementsByTagName('div')

Aceasta functie returneaza un array (cu index de la 0) cu elementele pe care le-a obtinut.
Array-ul returnat poate fi parcus cu instructiunea for(), iar la elementele din el se pot aplica proprietatile si metodele specifice obiectelor HTML in JavaScript. O lista cu acestea gasiti la pagina:
marplo.net/javascript/proprietati-metode-element-html


Aplicarea unei proprietati elementelor cu acelasi tag

Pentru aplicarea unei proprietati la elementele HTML care au acelasi tag, trebuie parcurs array-ul returnat de metoda getElementsByTagName(). Ca formula generala poate fi folosit urmatorul cod:

var elms = document.getElementsByTagName('numeTag');
for(var i=0; i<elms.length; i++) {
 elms[i].proprietate;
}
- Unde "elms" este o variabila in care e stocat array-ul cu tag-urile obtinute.
- Functia for() parcurge fiecare element din array-ul 'elms'.

Iata un exemplu in care atunci cand se da click pe un buton, continutul din fiecare tag SPAN va fi subliniat si albastru.
<h4>Exemplu getElementsByTagName</h4>
<p>Continut cu text incadrat in etichete SPAN:<br>
marplo.net : <span>Cursuri</span> si <span>tutoriale</span> web <span>gratuite</span>.
</p>
<p>- La clic pe urmatorul buton se vor aplica stilurile CSS: 'color' si 'text-decoration' la toate tag-urile SPAN din pagina.</p>
<button id='btn1'>Style Span</button>

<script>
function adStyle(tag){
 //array cu toate tag-urile precizate
 var elms = document.getElementsByTagName(tag);

 // Parcurge array-ul cu tag-urile
 for(var i=0; i<elms.length; i++){
 //aplica proprietati de stil
 elms[i].style.color ='blue';
 elms[i].style.textDecoration ='underline';
 }
}

//la click pe #btn1 se apeleaza functia adStyle() cu argument 'span'
document.getElementById('btn1').addEventListener('click', (ev)=>{
 adStyle('span');
});
</script>

getElementsByTagName() la getElementById()

Cand aplicati getElementsByTagName(numeTag) direct la obiectul document, se preia tag-urile 'numeTag' din tot documentul HTML, dar sunt situatii cand doriti sa preluati doar tag-uri dintr-o anumita portiune a paginii, cum ar fi de exemplu dintr-un DIV. In acest caz, adaugati acelui element HTML un ID (in care se afla tag-urile respective) si in codul JS il preluati cu metoda getElementById(ID), iar la acest obiect aplicati getElementsByTagName().
Sintaxa generala e urmatoarea:

var elms = document.getElementById('id').getElementsByTagName('numeTag')
- se va obtine un array cu elementele 'numeTag' care sunt in obiectul cu id-ul de la 'id'.

Iata si un exemplu in care sunt doua liste <ul> diferite, iar cand este apasat un buton, va fi aplicat un stil CSS doar la tag-urile <li> de la al doilea <ul>.
<h4>Exemplu getElementsByTagName() la getElementBiId()</h4>
<ul id='ul1'>
 <li>ul1 - Vine urmatorul.</li>
 <li>ul1 - Am venit degeaba.</li>
</ul>
<ul id='ul2'>
 <li>ul2 - Eu sunt cel ce vine,</li>
 <li>ul2 - La mine.</li>
</ul>
<p>- La clic pe butonul de mai jos se vor aplica stilurile CSS: 'color' si 'text-decoration' la tag-urile LI din elementul cu id 'ul2'.</p>
<button id='btn1'>Style Li</button>

<script>
function adStyle(id, tag){
 //array cu tag-urile 'tag' din elementul cu id-ul 'id'
 var elms = document.getElementById(id).getElementsByTagName(tag);

 // Parcurge array-ul cu tag-urile
 for(var i=0; i<elms.length; i++){
 //aplica proprietati de stil
 elms[i].style.color ='blue';
 elms[i].style.textDecoration ='underline';
 }
}

//la click pe #btn1 se apeleaza functia adStyle() cu argumentele pt id si tag
document.getElementById('btn1').addEventListener('click', (ev)=>{
 adStyle('ul2', 'li');
});
</script>

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.
Daca doriti sa adaugati un efect sau proprietate doar elementelor HTML care au acelasi atribut (si acelasi tag), folositi metoda getAttribute('attr_name') in cadrul parcurgerii array-ului returnat de getElementsByTagName().
- Ca formula generala ar fi urmatoarea:

var elms = document.getElementsByTagName('numeTag');
for(var i=0; i<elms.length; i++) {
 if(elms[i].getAttribute('attr_name')=='val') {
 // Executati functia sau codul dorit
 }
}
- Unde "val" e valoarea atributului 'attr_name' 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 buton, va fi adaugata o culoare de fundal doar la continutul din etichete SPAN care au atributul 'data-bgr' cu aceeasi valoare.
<h4>Exemplu getElementsByTagName() si getAttribute()</h4>
<p>Continut cu text incadrat in etichete SPAN:<br>
<span data-bgr='yellow'>Cursuri</span>, si <span data-bgr='yellow'>tutoriale</span> web <span data-bgr='green'>gratuite</span>.</p>
<p>- La clic pe butonul de mai jos se va aplica o culoare background la tag-urile SPAN care au atributul 'data-bgr' cu valoarea 'yellow'.</p>
<button id='btn1'>Add Bgr</button>

<script>
function adBgr(tag){
 //array cu tag-urile de la 'tag'
 var elms = document.getElementsByTagName(tag);

 // Parcurge array-ul cu tag-urile
 for(var i=0; i<elms.length; i++){
 //verifica atributul data-bgr
 if(elms[i].getAttribute('data-bgr') =='yellow'){
 elms[i].style.background ='yellow';
 }
 }
}

//la click pe #btn1 se apeleaza functia adBgr() cu argumentele pt. tag
document.getElementById('btn1').addEventListener('click', (ev)=>{
 adBgr('span');
});
</script>

Inregistrare evenimente la taguri HTML cand documentul este incarcat

Instructiunile JavaScript care lucreaza cu obiecte HTML din pagina e bine sa fie executate dupa incarcarea documentului HTML in DOM, deoarece JavaScript poate lucra cu elementele care sunt deja incarcate.
Puteti sa adaugati script-ul respectiv la sfarsitul documentului HTML (inainte de tag-ul de inchidere </body>), sau puteti sa folositi evenimentul DOMContentLoaded.
DOMContentLoaded se ataseaza la obiectul document, si se executa cand toate elementele din pagina (documentul HTML) s-au incarcat in DOM, fara sa mai astepte incarcarea continutului extern (fisiere css, imagini, iframe).
- Nu functioneaza in <iframe>.

• De exemplu, daca doriti sa preluati anumite tag-uri din pagina intr-un script JS, ori adaugati acel script dupa tag-urile respective, ori folositi DOMContentLoaded ca in urmatorul exemplu.

- In acest exemplu, dupa incarcarea documentului HTML se preiau in JS un element <input> si tag-urile LI din pagina si inregistreaza click la fiecare. Apoi, cand se da clic pe un LI, se adauga in caseta de text continutul din el.
<h4>Exemplu DOMContentLoaded</h4>

<p>- Dupa incarcarea documentului HTML se preia un element Input si tag-urile LI din pagina si inregistreaza click la fiecare.<br>
La clic pe oricare din listele de mai jos, se va adauga in caseta input textul din el.</p>
Input Text: <input type='text' id='inp1' readonly/>
<ul>
<li>Pacea-i Buna.</li>
<li>Iertarea Fericeste.</li>
<li>Iubirea-i Sfanta</li>
</ul>

<script>
var inp1; //va contine elementul #inp1

//functie apelata la DOMContentLoaded
function liClick(){
 inp1 = document.getElementById('inp1'); //caseta de text #inp1

 //array cu tag-urile LI
 var elms = document.getElementsByTagName('li');

 // Parcurge array-ul cu tag-urile si inregistreaza click la fiecare
 for(var i=0; i<elms.length; i++){
 elms[i].addEventListener('click', (ev)=>{
 inp1.value = ev.target.textContent;
 });
 }
}

//dupa ce se incarca documentul HTML in DOM, apeleaza functia liClick()
document.addEventListener('DOMContentLoaded', liClick);
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care atribut face ca optiunea din <select> sa fie selectata?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Optiune 1</option>
 <option value="val2" selected="selected">Optiune 2</option>
</select>
Care din aceste valori CSS creaza culoare gradient pentru fundal?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
Care cod creaza un array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicati functia PHP folosita pentru redirect la alta pagina.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
Indicati articolul corect la cuvantul "garden" in propozitia: "... garden is a place with flowers".
An The A
The garden is a place with flowers.
- Gradina este un loc cu flori.
Indicati articolul corect pentru cuvantul: "jardín" (gradina)
la los el
El jardín es un lugar de flores.
- Gradina e un loc cu flori.
Utilizare getElementsByTagName in JS

Last accessed pages

  1. Cursuri limba engleza gratuite si lectii online (38675)
  2. Blog si Cugetari Personale (45859)
  3. Creare link-uri (10190)
  4. Titluri, Paragrafe, Un nou rand, Linie orizontala (18651)
  5. Curs HTML gratuit Tutoriale HTML5 (94798)

Popular pages this month

  1. Curs HTML gratuit Tutoriale HTML5 (494)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (458)
  3. Curs si Tutoriale JavaScript (289)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (262)
  5. Curs CSS Online Tutoriale CSS3 (252)