使用javascript为第一个孩子添加班级

是否有任何原因导致此链不起作用？它不添加类：s。使用javascript为第一个孩子添加班级

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

它应该返回这是一个<a>但似乎出问题不知何故导航元素的第一个孩子。

感谢您的帮助！

来源

2012-09-11 cmplieger

语法是否至少正确？ – cmplieger

那是因为你有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>之间的空格解释为多余的文本节点。因此，firstChild将不再起作用，因为它将返回文本节点。

如果你有下面的标记，它会work：

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

来源

2012-09-11 01:46:31

你能解释一下它是什么吗childNodes [i] .nodeType！== 3的意思？ – cmplieger

@SnippetSpace：当然，我已经编辑了我的答案。它忽略了文本节点，因为对于它们，'nodeType'具有值'3'。 –

让它工作。感谢您的解释：）。你的代码中的小错误，使其做我想做的事。 childNodes [i] .className =“current”;应该是childNodes [1] .className =“current”;使“第一个孩子”的事情:) – cmplieger

jQuery的可以使这很容易：

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

来源

2012-09-11 01:41:09 firestream

他没有要求jQuery。 – 0x499602D2

我想学习Javascript。已经知道jQuery，并且发现编写纯代码更令人满意。 – cmplieger

是真的，但他没有具体说jquery不是，并且很多事情在jquery中简单得多 – firestream

声明：

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

来源

2012-09-11 06:21:16 RobG

使用javascript为第一个孩子添加班级

回答

相关问题