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 HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
Utilizare getElementsByTagName in JS

Last accessed pages

  1. Jokes - Glume, Bancuri, Humor (2) (680)
  2. Scriere scripturi PHP elementare (1576)
  3. Conditional IF in Limba Engleza - Fraze Conditionale (20736)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (6659)
  5. Espanol Chistes - Glume, Bancuri (877)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2144)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1480)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1072)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (1025)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (981)