Vediamo un po' la struttura della lista.
var mainMenuItem = menuObj.getElementsByTagName('LI')[0];
Ecco la lista:
<div id="dhtmlgoodies_menu"> <ul> <li><a href="#">Siti</a> <ul> <li><a href="#">Grafica</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Web Design</a></li> </ul> </li> <li><a href="#">Servizi</a> <ul> <li><a href="#">Download</a></li> <li><a href="#">Webtool</a></li> <li><a href="#">Font.it</a></li> <li><a href="#">Corsi</a></li> </ul> </li> <li><a href="#">Forum</a> <ul> <li><a href="#">HTML/XHTML</a></li> <li><a href="#">ASP</a></li> <li><a href="#">PHP</a></li> </ul> </li> <li><a href="#">Contatti</a></li> </ul>La lista contiene un UL che contiene dei LI i quali contengono altri UL che contengono altri LI.
Il punto è: se io faccio riferimento a un insieme di elementi LI del DIV che contiene la lista, faccio riferimento a tutti i LI o solo a quelli del primo livello?
Copio la lista su un altro foglio e ci faccio delle prove...
Ecco il mio codice:
<script>
function funzione(){
var menuObj = document.getElementById('dhtmlgoodies_menu');
var Insieme=menuObj.getElementsByTagName("LI")
for(n=0;n<Insieme.length;n++)
alert(Insieme[n].innerHTML);
}
window.onload=funzione;
</script>
<body>
<div id="dhtmlgoodies_menu">
<ul>
<li><a href="#">Siti</a>
<ul>
<li><a href="#">Grafica</a></li>
<li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Web Design</a></li>
</ul> </li>
<li><a href="#">Servizi</a>
<ul> <li><a href="#">Download</a></li>
<li><a href="#">Webtool</a></li>
<li><a href="#">Font.it</a></li> <li><a href="#">Corsi</a></li>
</ul>
</li>
<li><a href="#">Forum</a> <ul>
<li><a href="#">HTML/XHTML</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
Da questo ottengo che gli elementi compresi nell'insieme sono tutti, non solo quelli del primo livello.
Tornando al codice:
var mainMenuItem = menuObj.getElementsByTagName('LI')[0];
prende soltanto il primo degli elementi LI, e cioè quello che ha questo contenuto:
<a href="#">Siti</a> <ul> <li><a href="#">Grafica</a></li> <li><a href="#">CSS</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Web Design</a></li> </ul>...e lo chiama mainMenuItem. Predispone nello stesso tempo un Array di tutti i mainMenuItem:
var mainMenuItemArray = new Array();
Con questa:
while(mainMenuItem){
if(mainMenuItem.tagName && mainMenuItem.tagName.toLowerCase()=='li'){
mainMenuItemArray[mainMenuItemArray.length] = mainMenuItem;
var aTag = mainMenuItem.getElementsByTagName('A')[0];
if(showSubOnMouseOver)
aTag.onmouseover = showSub;
else
aTag.onclick = showSub;
}
mainMenuItem = mainMenuItem.nextSibling;
}
...verifica se si tratta di un LI;Se sì, lo aggiunge all'array mainMenuItemArray;
Prende il primo degli elementi A che sono contenuti nel mainMenuItem di turno e lo chiama aTag;
A seconda dell'impostazione data dalla variabile showSubOnMouseOver, esegue la funzione showSub al passaggio del mouse su questo elemento A o al click del mouse sull'elemento;
Quindi passa al fratello del mainMenuItem. Ora il fratello di mainMenuItem può essere un elemento diverso da un LI, come un textNode, ma in questo caso la verifica non viene superata e si passa al fratello successivo. fratello successivo che non è un LI di un livello inferiore!
In sintesi: questa funzione crea un Array di tutti i mainMenuItem, prende uno per volta tutti i mainMenuItems e attribuisce all'elemento A contenuto in ognuno di essi la risposta a un evento.
Nessun commento:
Posta un commento