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

Question

如何检测导航项目li是否有下拉列表？ 在下面的示例中：

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

重要

我知道这是公平的使用jQuery - 但我不想使用JQUERY。

这是我需要JS的唯一地方，我正在开发一个非常干净的网站，没有使用任何JavaScript。 所以只是为了震动这篇文章我不想使用jQuery。

虽然IE8兼容性是必需的！

请使用纯JavaScript帮助解决此问题。 谢谢大家！

Answer 1

IE8兼容（但不是IE7）：

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

Answer 2

除了Kolink的回答，你可以使用getElementByID和getelementsByClassName （也适用于IE7）而不使用querySelectorAll来做同样的事情：

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

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