How to select nested DOM elements inside 'ul' element

Q_Mlilo picture Q_Mlilo · Aug 12, 2010 · Viewed 41.2k times · Source

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

Guffa picture Guffa · Aug 12, 2010

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');