Metoda getElementsByTagName() folosită într-o pagină returnează o colecție de elemente („p”, „li” etc.) cu un nume de etichetă specificat (ex. de formă: document.getElementsByTagName(„p”)). Dacă metoda se aplică unui element (de ex. table.getElementsByTagName(‘td’)) toți descendenții elementului specificat sunt căutați, dar nu și elementul în sine.
|
1 2 3 4 5 6 7 8 9 10 |
<html> <body> <p>Text de probă.</p> <p>Text de probă.</p> <p>Hello World!</p> <script> document.getElementsByTagName("p")[2].innerHTML = "<em>Hello World</em>!"; </script> </body> </html> |
Afişează următorul conţinut exemplificat mai jos.
Text de probă.
Text de probă.
Hello World!
Dacă se foloseşte getElementsByTagName(„*”) vor fi returnate toate elementele din document.
Aşadar, deşi pe a treia linie (datorită acelui 2, elementele fiind accesate prin index, începând cu 0) apărea tot „Text de probă”, scriptul JS îl înlocuieşte cu italicul „Hello world”.
Afişarea lungimii unei colecţii dintr-un document (în exemplul nostru fiind trei, deci rezultatul fiind cifra 3) se poate face astfel:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <body> <p>Text de probă.</p> <p>Text de probă.</p> <p>Hello World!</p> <div id="afis"></div> <script> const elem = document.getElementsByTagName("p"); var afis = document.getElementById("afis"); afis.innerHTML = elem.length; </script> </body> </html> |
Pentru a aplica în buclă anumite proprietăţi, în astfel de circumstanţe, se poate în maniera de mai jos, de exemplu, pentru schimbarea culorii conţinutului elementului vizat.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <body> <p>Text de probă.</p> <p><em>Text de probă.</em></p> <p>Hello World!</p> <div id="afis"></div> <script> const elem = document.getElementsByTagName("em"); for (let i = 0; i < elem.length; i++) { elem[i].style.color = "red"; } </script> </body> </html> |
Rezultatul va fi de forma următoare:
Text de probă.
Hello World!
Text de probă.
Sursa: Mozilla.org
