How to select nested dom elements.

Question

Hi,

I am looking for a way to collect all <a> tags and load then in 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> 

Edit Solution:

Thank you all, your responses have helped me find a more precise solution.

Mootools 1.1: @ Oskar

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

@ Dimitar

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

Keep Geeking :)

Answer 1

I'm not sure if you want to limit the action somehow, but getting all anchor elements in the page is easy:

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

If you want to limit your search inside an element, set an id on that element so that you can easily find it, and use the getElementsByTagName on the element:

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

Answer 2

// 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");

Answer 3

$$('.menu a')