[JAVASCRIPT] [metodi e proprietà] document.getElementsByTagName

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

Fonti esterne

javascript, metodi javascript

Related Articles

0 Comment

Rispondi