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 tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Utilizare getElementsByTagName in JS

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (259729)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (119798)
  3. Conditional IF - Exercitii si teste engleza incepatori (20118)
  4. Limba spaniola curs online incepatori si avansati (26378)
  5. Trecutul continuu - Exercitii si teste incepatori (12854)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (619)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (536)
  3. Gramatica limbii engleze - Prezentare Generala (439)
  4. Exercitii engleza - English Tests and exercises - Grammar (379)
  5. Coduri pt culori (362)