Question

有什么理由这个连锁不起作用？它没有添加类：s。

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

它应该返回导航元素的第一个子元素<a>，但这似乎在某种程度上出错了。

感谢您的帮助！

Answer 1

那是因为nav和a之间有text nodes。您可以按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>之间的空格解释为 extra 文本节点。因此，firstChild将不再有效，因为它将返回文本节点。

如果您有以下标记，则 work ：

<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');

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

4 个答案: