使用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爲第一個孩子添加班級

回答

相關問題