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

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的答案，您可以不querySelectorAll使用getElementByIDand getelementsByClassName（也适用于 IE7）来做同样的事情：

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

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