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

Esempi

<script>
function AttivaMetodoClasse() {
   alert(document.getElementsByClassName('MioParagrafo').innerHTML);
}
</script>
<p class="MioParagrafo">Testo del paragrafo</p>
<button onclick="AttivaMetodoClasse()">attiva metodo</button>

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>