如何使用普通的纯Javascript检测Nav是否有子元素？

Question

How do I detect if the nav item li has dropdown or not? In the example below:

<div id="nav">
    <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link One</a> <!-- add class to this LI -->
            <ul class="dropdown">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link One</a></li>
            </ul>
        </li>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link One</a></li>
    </ul>
</div>

Important

I know this is fair using jQuery - BUT I DONT WANT TO USE JQUERY.

This is the only place where I need JS, I am developing a very clean site where no JavaScript has been used. So just for the shake of this piece I don't want to use jQuery.

IE8 Compatibility is required though!

Kindly help on solving this issue using plain JavaScript. thanks all!

Answer 1

IE8 compatible (but not IE7):

var qsa = document.querySelectorAll("#nav .dropdown"), l = qsa.length, i;
for( i=0; i<l; i++) {
    qsa[i].parentNode.className = "derp";
}

Answer 2

In addition to Kolink 's answer, you can do the same without using querySelectorAll by using getElementByID and getelementsByClassName (and working for IE7 too):

var parent = document.getElementById("nav"),
    childs = parent.getElementsClassName("dropdown"),
    length = childs.length,
    i;

for (i = 0; i < length; i++) {
    childs[i].parentNode.className = "derp";
}