document.getElementsByTagName() (metodo JavaScript) accede, in lettura e scrittura, agli elementi HTML della pagina tramite il relativo tag, da indicarsi come argomento ovvero all’interno delle sue parentesi (il metodo accetta come argomento il carattere jolly * per selezionare tutti i tag). Questo metodo può essere richiamato su qualsiasi nodo, ma generalmente lo si richiama nel nodo principale document.
Sintassi
document.getElementsByTagName("[NomeTag]");
Esempi
<script>
function AttivaMetodoTag() {
alert(document.getElementsByTagName("p").innerHTML);
}
</script>
<p>Testo del paragrafo</p>
<button onclick='AttivaMetodoTag()'>attiva metodo</button>
Testo del paragrafo
E’ quindi possibile attraversare, ad esempio con un ciclo for, gli elementi estratti tramite questo metodo.
<script>
//clicca su una qualsiasi degli elementi
document.querySelectorAll('.content').forEach(function (el) {
el.addEventListener('click', function() {
alert('ok');
});
});
// clicca sul bottone querySelectorAll
document.getElementById("SelectorCSS").addEventListener("click", NomeSelectorCSS);
function NomeSelectorCSS() {
document.querySelectorAll("div");
var MioArray = document.getElementsByTagName("button");
var LunghezzaMioArray = MioArray.length;
arrayTag = "";
for (var a=0;a<LunghezzaMioArray;a++) {
arrayTag += MioArray[a].innerText+". ";
}
document.getElementById("risultato").innerText = "Contenuto dei " +LunghezzaMioArray+ " button: "+ arrayTag;
}
// clicca sul bottone tag
document.getElementById("Tag").addEventListener("click", NomeTag);
function NomeTag() {
var MioArray = document.getElementsByTagName("div");
var LunghezzaMioArray = MioArray.length;
arrayTag = "";
for (var a=0;a<LunghezzaMioArray;a++) {
arrayTag += MioArray[a].innerText+". ";
}
document.getElementById("risultato").innerText = "Contenuto dei " +LunghezzaMioArray+ " Div: "+ arrayTag;
}
// clicca sul bottone classe
document.getElementById("Classe").addEventListener("click", NomeClasse);
function NomeClasse() {
var MioArray = document.getElementsByClassName("content");
var NomeClasse = MioArray[0].getAttribute("class");
var LunghezzaMioArray = MioArray.length;
arrayTag = "";
for (var a=0;a<LunghezzaMioArray;a++) {
arrayTag += MioArray[a].innerText+". ";
}
document.getElementById("risultato").innerText = "Contenuto dei " +LunghezzaMioArray+ " Div con classe '"+ NomeClasse +"': "+ arrayTag;
}
</script>
<div class="content">Contenuto 1</div>
<div class="content">Contenuto 2</div>
<div>Contenuto 3</div>
<div class="content">Contenuto 4</div>
<button id="SelectorCSS">querySelectorAll</button>
<button id="Tag">getElementsByTagName</button>
<button id="Classe">getElementsByClassName</button>
<p id="risultato"></p>
Contenuti correlati
- CSS
- HTML
- JavaScript
- jQuery
- PHP
- SQL
- WORDPRESS
0 Comment