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