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.
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
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.
<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>
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:
<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>
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.
<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>
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>.
<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>
<input type="text" name="a_name" value="val" />
h3 {
font-variant: small-caps;
}var msg = "Viziteaza CoursesWeb.net"; alert(msg);
$ip = $_SERVER["REMOTE_ADDR"]; echo $ip;
He actually came on time. - De fapt, el a venit la timp.
Hoy hace buen tiempo. - Astazi e vreme frumoasa.