javascript - 使用javascript向第一个 child 添加类(class)

Question

这个链条不工作有什么原因吗？它不添加类:

document.getElementsByTagName('nav')[0].firstChild.className = "current"

它应该返回 nav 元素的第一个子元素，它是一个 <a>。这不会发生。

感谢您的帮助!

Answer 1

那是因为你有 text nodes在 nav 之间和 a .您可以通过 nodeType 过滤它们:

var childNodes = document.getElementsByTagName('nav')[0].childNodes;
for (var i = 0; i < childNodes.length; i++) {
    if (childNodes[i].nodeType !== 3) { // nodeType 3 is a text node
      childNodes[i].className = "current";  // <a>
      break;
    }        
}

这可能看起来很奇怪，但是，例如，如果您有以下标记:

<nav>
<a>afsa</a>
</nav>

这是一个 DEMO .

为什么会这样？因为 一些 浏览器可能会解释 <nav> 之间的空格和 <a>作为一个额外 文本节点。因此，firstChild将不再有效，因为它将返回文本节点。

如果您有以下标记，它会是 work :

<nav><a>afsa</a></nav>