La funzione getElementsByClassName
Scritto da Jacopo Nuzzi
(http://www.jacoz.net)
il 28 maggio 2007
Purtroppo non hanno pensato di integrare anche la funzione per ottenere tutti gli elementi che hanno una determinata classe.
Quindi creare un nuovo file, chiamato "funzioni.js", e salvarlo con al suo interno questo codice:
Questo non è altro che una semplice funzione che verrà chiamata, per esempio, in questo modo:
Ecco un esempio pratico.
Esattamente in questa pagina il sito contiene tre menu laterali che hanno come classe "menu" ecco cosa succede:
<script type="text/javascript">function countElements(classname) { var selClass = document.getElementsByClassName(classname); if (selClass.length > 0) { alert('Ci sono ' + selClass.length + ' elementi con questa classe.'); } }</script>
<input type="button" onclick="countElements('menu');" value="Clicca quì!" />
Come vedete è molto semplice e molto utile :)
Alla prossima!
Ciao a tutti,
in questo articolo vedremo come ottenere tramite l'utilizzo di javascript tutti gli elementi presenti nella nostra pagina con una determinata classe.
JavaScript ha integrato nel suo utilissimo linguaggio una serie di funzioni:
- document.getElementById() - Per ottenere l'elemento che possiede un determinato ID
- document.getElementsByName() - Per ottenere tutti gli elementi con un determinato nome
- getElementsByTagName() - Per ottenere tutti gli elementi con uno specifico tag html (Es. div, td, ecc.)
Purtroppo non hanno pensato di integrare anche la funzione per ottenere tutti gli elementi che hanno una determinata classe.
Quindi creare un nuovo file, chiamato "funzioni.js", e salvarlo con al suo interno questo codice:
CODICE
document.getElementsByClassName = function (classname)
{
var a = [];
var re = new RegExp('\b' + classname + '\b');
var els = document.getElementsByTagName("*");
for(var i = 0, j = els.length; i < j; i++)
{
if (re.test(els[i].className))
{
a.push(els[i]);
}
}
return a;
}Questo non è altro che una semplice funzione che verrà chiamata, per esempio, in questo modo:
CODICE
function countElements(classname)
{
var selClass = document.getElementsByClassName(classname);
if (selClass.length > 0)
{
alert('Ci sono ' + selClass.length + ' elementi con questa classe.');
}
}Ecco un esempio pratico.
Esattamente in questa pagina il sito contiene tre menu laterali che hanno come classe "menu" ecco cosa succede:
<script type="text/javascript">function countElements(classname) { var selClass = document.getElementsByClassName(classname); if (selClass.length > 0) { alert('Ci sono ' + selClass.length + ' elementi con questa classe.'); } }</script>
<input type="button" onclick="countElements('menu');" value="Clicca quì!" />
Come vedete è molto semplice e molto utile :)
Alla prossima!