Question

i have this simple html:

<div id="tree">
    <div class="roi">
        <ul>
            <li>text1</li>
            <li>text2</li>
            <li>text3
                <ul>
                    <li>insideText1<li>
                    <li>insideText2<li>
                </ul>
            </li>
        </ul>
    </div>
</div>

I want to get only the item "text2" and the item "insideText2";
so I tried to wrote:

var Tree=document.getElementById("tree").document.getElementsByTagName("UL");

But I don’t know how to reach the specific li that contains:"text2" and "insideText2".
Please help.

Answer 1

There is only one document object, so you’re almost there with var Tree=document.getElementById("tree").document.getElementsByTagName("UL");, just drop the second document:

var Tree=document.getElementById("tree").getElementsByTagName('ul');

Tried it out in chrome console, on this page

document.getElementById('question').getElementsByTagName('td');

Worked like a charm

Update

That’s easy… the getElementsByTagName() method returns a nodeList (which is more than just any old array). The above code provides a list of all ul elements within the element that has the ‘ul’ tag. You could either loop through all ul tags in the list, and check for li children that contain an undordered list, or a certain innerText/innerHTML. I’ll bash out a quick example in a minute for you.

Check this jsfiddle for a working example. play around with it as much as you want, let me know if there’s still something not entirely clear to you… cheers