使用javascript将课程添加到第一个孩子

Question

这条链有什么原因不起作用？它不添加类：

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

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

谢谢你的帮助！

Answer 1

那是因为和之间有文本节点。您可以通过以下方式过滤它们：navanodeType

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>

这是一个演示。

为什么会出现这种情况？因为某些<nav>浏览器可能会将和之间的空格解释<a>为额外的文本节点。因此，firstChild将不再起作用，因为它将返回文本节点。

如果您有以下标记，它会起作用：

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

Answer 2

您可以简单地使用 document.querySelectorAll 来选择列表。使用“firstElementChild”获取第一个子节点并添加类。

 const firstChild = document.querySelectorAll('nav').firstElementChild;
 firstChild.classList.add('current');