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
0 Comment