为什么我得到一个[文本对象]而不是预期的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？

回答

相关问题