How to select nested DOM elements inside an 'ul' element

I am looking for a way to collect all the <a> tags and then load it into an array using Mootool 1.1 or pure javascript.

 <ul class="menu"> <li> <ul> <li><a href="#">Group One</a> <ul> <li><a href="#">I want</a></li> <li><a href="#">I want too</a></li> </ul> </li> <li><a href="#">Group Two</a> <ul> <li"><a href="#">I want</a></li> <li><a href="#">I want too</a></li> </ul> </li> </ul> </li> </ul> 

Change decision:

Thank you, all your answers helped me find a more accurate solution.

Mootools 1.1: @Oskar

 $$("ul.menu ul li ul li a"); 

@ Dimitar

 document.getElements("ul.menu ul li ul li a"); 

Keep Geeking :)

+9
javascript dom mootools
source share
3 answers
 // for the links of the first ul.menu on the page var menuLinks = document.getElement("ul.menu").getElements("a"); // or you can get all links children of all uls with class menu var menuLinks = document.getElements("ul.menu a"); 
+8
source share

I'm not sure if you want to limit the action in some way, but it's easy to get all the anchor elements on the page:

 var links = document.getElementsByTagName('a'); 

If you want to limit the search within an element, set the identifier of this element so that you can easily find it, and use getElementsByTagName for the element:

 var links = document.getElementById('menu').getElementsByTagName('a'); 
+8
source share

$$('.menu a')

+2
source share

All Articles