javascript - 使用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.getElementsByTagName('nav')[0].firstChild.className = "current"

有点脆弱，因为假定的文档结构中的任何更改都会破坏您的代码。所以更健壮的做类似的事情：

var links, 
    navs = document.getElementsByTagName('nav');

if (navs) links = nav[0].getElementsByTagName('a');

if (links) links[0].className = links[0].className + ' ' + 'current';

您还应该有健壮的 addClassName 和 removeClassName 函数。

Answer 3

Jquery 可以使这变得非常简单：

$("#nav:first-child").addClass("current");

Answer 4

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

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