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

document.querySelectorAll() (metodo/proprietà JavaScript) accede, in lettura e scrittura, agli Elementi HTML della pagina tramite i selettori CSS (ivi compresi eventuali id plurimi, comunque da evitare), a differenza del metodo document.querySelector() che invece consente di accedere soltanto al primo Elemento. E’ quindi possibile attraversare, ad esempio con un ciclo for, gli Elementi estratti tramite questo metodo.

Sintassi

document.querySelectorAll("[selettore css]");

Esempi

<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