Get all elements nested in UL tag

Question

Hi,

I have HTML code structure:

<ul id="main">
 <li>   
    <a href="#"></a>
    <ul>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
    </ul>
  <li>
</ul>

Want to select all elements inside UL id="main".

Tried to use:

var el = document.getElementById("main").getElementsByTagName("*");


for (var i=0; i<el.length; i++) {
    alert(el[i].tagName);
}

But only get LI and A tags. UL tags are missing. Any ideas ?

Answer 1

I get the <ul> tag with your code, give it a test here: http://jsfiddle.net/RFKsC/1/ (it's the third alert).

So what you have should work, you do need a / in your HTML though, this part:

    </ul>
  <li> <!-- should be </li> -->
</ul>

Without that closing tag, you may get some funky/unpredictable cross-browser behavior, fixing it should resolve the issue.