爲什麼我得到一個[文本對象]而不是預期的TR對象與JavaScript中的previousSibling？

所以，如果我有HTML代碼：爲什麼我得到一個[文本對象]而不是預期的TR對象與JavaScript中的previousSibling？

<HTML> 
    <HEAD> 
    <TITLE>This is a test</TITLE> 
    </HEAD> 
    <BODY> 
    <TABLE> 
     <TR> 
     <TD>First Cell</TD> 
     </TR> 
     <TR> 
     <TD>Second Cell</TD> 
     <TD><A href="#" onclick="alert(this.parentNode.parentNode.previousSibling.childNodes[0].innerHTML); return false;">Click Here</A></TD> 
     </TR> 
    </TABLE> 
    </BODY> 
</HTML>

這適用於IE瀏覽器，而不是Firefox和可能更多的瀏覽器在那裏。顯然，Firefox將TR（縮進）之間的空白解釋爲上面代碼中'this'的父TR的前一個兄弟。所以不是獲得所需的TR對象，而是給我一個[文本對象]。

所以我現在的問題是，爲什麼Firefox不像Internet Explorer那樣忽略TR之間的空白。我知道我可以使用previousElementSibling來規避這一點，但我想知道爲什麼Firefox會這樣做，並且如果有邏輯解釋或用法。我試圖在互聯網上查找它，但無濟於事。所以如果有人能告訴我或給我一個鏈接，我可以找到這些信息，我將不勝感激！

來源

2011-04-29 lugte098

'HMTL'？這是新的:) – alex 2011-04-29 11:18:31

哎呀，我會改變它：P – lugte098 2011-04-29 11:19:22

是的你是對的。實際上IE是主要錯誤的。 Here is Mozilla's take on it

您可以

一）使用parentNode.getElementsByTagName
B）通過循環迴路壓平DOM直到節點類型就是你要找的人：這是一個比Mozilla的給在上面的鏈接簡單的腳本：http://blog.tegneblokken.net/2009/08/counting-childnodes-with-javascript-the-whitespace-incident/
C）使用jQuery元素之間

來源

2011-04-29 11:18:48 mplungjan

1）你能否詳細說明「扁平化」，我不完全明白你的意思。 2）我不打算使用jQuery，因爲它的庫很龐大，只是用它來做這些小小的代碼是沒用的。 3）我對如何解決這個問題不感興趣，因爲我已經擁有了。問題是爲什麼Firefox將空白解釋爲[文本對象] – lugte098 2011-04-29 11:22:16

@ lugte098請參閱更新 – mplungjan 2011-04-29 11:26:58

我想我將使用a），因爲它是一小段代碼，適用於所有瀏覽器。日Thnx！ – lugte098 2011-04-29 11:32:58

空白在HTML和在許多情況下顯著會影響渲染，即使在IE瀏覽器，所以IE是怪人這裏。

你可以寫簡單的功能來掩蓋這種差異：

function previousSibling(node) { 
    while ((node = node.previousSibling) && node.nodeType == 3 && /^\s*$/.test(node.data)); 
    return node; 
} 

function nextSibling(node) { 
    while ((node = node.nextSibling) && node.nodeType == 3 && /^\s*$/.test(node.data)); 
    return node; 
}

來源

2011-04-29 11:30:32

+1。 thnx的答覆，我可能想在未來考慮這一點！ – lugte098 2011-04-29 11:34:09

錢...這麼錢。 – worked 2012-10-26 15:17:20

爲什麼我得到一個[文本對象]而不是預期的TR對象與JavaScript中的previousSibling？

回答

相關問題