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

Add class to first child using javascript

本文关键字：第一个 添加 javascript 使用      更新时间：2023-09-26

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

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

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

谢谢你的帮助！

这是因为在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>

这是一个演示。

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

如果您有以下标记，它将工作：

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

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

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

语句：

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函数。

Jquery可以让这变得非常容易： 
$("#nav:first-child").addClass("current");
相关文章：