[DOM] Alle hyperlinks binnen een div detecteren

[anoniem]

De bedoeling is om alle a elementen te detecteren binnen een div met de id: "nav". Zo ziet die div er ongeveer uit (verschilt per pagina):[code:1:5b96a68950]<!-- nav --> <div id="nav"> <ul> <li id="lifirst"><a href="/home/" title="Homepage van Limpid">home</a><span id="home"></span></li> <li><a href="/profiel/" title="Informatie over Limpid">profiel</a><span id="profiel"></span></li> <li><a href="/diensten/" title="Diensten">diensten</a><span id="diensten"></span></li> <li class="current"><strong>projecten</strong><span id="projecten"></span></li> <li><a href="/contact/" title="Contacteer Limpid">contact</a><span id="contact"></span></li> </ul> </div> <!-- END nav -->[/code:1:5b96a68950]Als de a elementen zijn gevonden, moet het volgende gebeuren: Bij een onmouseover moet het achtergrondplaatje van de span vervangen worden en bij onmouseout de vorige weer teruggezet worden. Het is me gelukt om bij een hover over a de achtergrond van de "sibling" (het span element) te veranderen:[code:1:5b96a68950]function ahover(){ if (!document.getElementById) return var a = document.getElementsByTagName('a'); for(var i = 0; i < a.length; i++){ a[i].onmouseover = function(){ this.nextSibling.style.backgroundColor = 'red'; } a[i].onmouseout = function(){ this.nextSibling.style.backgroundColor = 'green'; } } } window.onload = ahover;[/code:1:5b96a68950]Maar is dus de bedoeling alleen de a elementen te pakken binnen de div met id: "nav" anders kunnen er rare dingen gebeuren. Met childNodes lukt dit niet, want dan krijg je het elemnt ul terug en je hebt een iets dieper gelegen element nodig. Iemand enig idee hoe ik alle a elementen in een array/nodelist terugkrijg? Alvast bedankt. -termin8or

[anoniem]

Als je nou gewoon nog 2x de childNodes opvraagt heb je toch het gewenste resultaat? - Bas

[anoniem]

Hmz.. dat dacht ik ook :). Ik had zoiets geprobeerd:[code:1:2ff1e80dc6]var menu = document.getElementById('nav'); for (i = 0; i < menu.childNodes.childNodes.childNodes.length; i++) { node = menu.childNodes[i].childNodes[i].childNodes[i]; if(node.nodeName == 'a'){ node.onmouseover = function(){ this.nextSibling.style.backgroundColor = '#000'; } node.onmouseout = function(){ this.nextSibling.style.backgroundColor = '#fff'; } } } } window.onload = menunav;[/code:1:2ff1e80dc6]Maar dat werkt niet echt helaas. -termin8or

[anoniem]

Je kan ook overwegen om de a-tjes een specifieke class te geven. Met een simpele [color=darkblue:dd8cdfec1b][i:dd8cdfec1b]if (a[i].className == 'bla')[/i:dd8cdfec1b][/color:dd8cdfec1b] kom je dan ook een eind.

[anoniem]

Hmz.. beetje smerige oplossing als je het mij vraagt :). Dat wordt dan backupplan 2 (3 is zoiets meer dan met eventhandlers binnen de tag :P ). Is er in het DOM geen descendent combinator? In css heb je bijvoorbeeld zoiets:[code:1:de68f01469]div#nav a{} /* voor beeld descendent combinator */[/code:1:de68f01469]Tot nu toe heb ik alleen een soort van child-selector gezien[code:1:de68f01469]div#nav > a /* dit resulteert dus in niets, omdat #nav geen "kinderen" heeft die element a zijn */[/code:1:de68f01469]Een descendent combinator (de DOM variant dan) zou in dit geval heel handig zijn. -termin8or

[anoniem]

[quote:2a595bfafd] function ahover(){ if (!document.getElementById) return x=document.getElementById('nav'); var a = x.getElementsByTagName('a'); for(var i = 0; i < a.length; i++){ a[i].onmouseover = function(){ this.nextSibling.style.backgroundColor = 'red'; } a[i].onmouseout = function(){ this.nextSibling.style.backgroundColor = 'green'; } } } window.onload = ahover; [/quote:2a595bfafd] Dit is geloof ik wat je wil. In principe is getelementsbytagname een methode van elk html-element, en dat is hier heel handig te gebruiken.

[anoniem]

Geweldig. -termin8or