How to select nested DOM elements inside 'ul' element

Question

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 :)

`document.getElemnts` is mootools, not native javascript - $$ aliases to that. :) there's a school of thought that being too precise in the selectors is not always leading to the best performance results or maintainability - unless you need to be as precise in order to exclude different links, i think it's overkill. a more elegant solution and certainly faster performing would be so assign a class to the links themselves, bit we don't always get to change the markup. :) — Dimitar Christoff, Aug 13 '10 at 07:18

Guffa · Answer 1 · 2010-08-12T15:58:51.577

17

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

edited Aug 12 '10 at 15:58

answered Aug 12 '10 at 13:26

Guffa

687,336
108
737
1,005

thanks for the response, however document.getElementsByTagName will just select all the links in the document and all i want to do is select main menu links. – Q_Mlilo Aug 12 '10 at 14:22
@Q_the_novice: Then set an id on the menu element so that you can use the `getElementById` method to find it, then use the `getElementsByTagName` method on that element to find the links inside it. – Guffa Aug 12 '10 at 15:57

score 11 · Accepted Answer · answered Aug 12 '10 at 14:46

11

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

answered Aug 12 '10 at 14:46

Dimitar Christoff

26,147
8
50
69

3

@AdiPrasetyo use document.querySelector(); instead. EG: `document.querySelector("ul.menu a");` – Lotix Dec 15 '16 at 11:12
4

```VM231:1 Uncaught TypeError: document.getElements is not a function at :1:10``` – sapy Aug 28 '17 at 06:49
4

I wonder what make u make that weird insulting comment .. lack of basic decency / good upbringing ? – sapy Aug 31 '17 at 06:43
This is working just for element type and class. Can you advise to select for example
element with id nested in multiple nested div?
– QMaster Apr 13 '19 at 12:19

score 2 · Answer 3 · answered Aug 12 '10 at 20:31

2

$$('.menu a')

answered Aug 12 '10 at 20:31

Oskar Krawczyk

3,492
17
20

$$ is being deprecated but it's an alias for `this.document.getElements()` - this selector is a bit broad though. what if you have `
` elsewhere
– Dimitar Christoff Aug 13 '10 at 06:33
@Dimitar: The current Joomla! CMS version(1.5) uses mootools 1.1, so until Joomla! 1.6(uses mootools 1.2) is officially released the $$ selector will still be useful to developers. Also check my edit at the top. – Q_Mlilo Aug 13 '10 at 07:03

How to select nested DOM elements inside 'ul' element

3 Answers3

Linked