0

更新： 这是 JsFiddle 链接：http: //jsfiddle.net/zAVFv/

它似乎在 JsFiddle 中不起作用，但猜测它可以显示整个代码 - html、css 和 Js。

我在使用 Javascript 进行 DOM 编辑时遇到了一个非常奇怪的情况。我的示例代码如下。基本上，swapCells 将接收两个对象，每个对象有 2 个子元素 - 一个是 img 元素，另一个是 textNode。我想看到的是 removeChild 是如何工作的。

我已经标记了所有混乱来自的 2 行。问题#1 位于 sourceTD 删除其子项的行上，问题#2 是从destinationTD 中删除lastChild 时。

让我解释一下下面的代码是如何运行的： a) 当代码中只存在问题 line#1 时，sourceTD 子级被删除，输出显示 source 有 1 个 img 类型的子级；destination 有 2 个子项 - img 和 text ---- 按预期工作 b) 当代码中仅存在问题行 #2 时，destinationTD 子项被删除，再次与上述类似，如预期 c) 现在问题 - 当这两行都存在于代码中，它只删除了 sourceTD lastChild。仅接收警报的 sourceTD 部分的输出。目的地TD警报没有出现，所以我无法评估目的地孩子是否被移除

代码：

function swapCells(sourceTD, destinationTD){

//line below is issue line#1 
sourceTD.removeChild(sourceTD.lastChild);  

//line below is issue line#2
destinationTD.removeChild(destinationTD.lastChild);

    if(sourceTD.hasChildNodes()){
        alert("Source has: " + sourceTD.childNodes.length);
        alert(sourceTD.childNodes[0].alt); 
        alert(sourceTD.childNodes[1].nodeName); 
    }
destinationTD.removeChild(destinationTD.lastChild);
    if(destinationTD.hasChildNodes()){
        alert("Destination has: " + destinationTD.childNodes.length);
        alert(destinationTD.childNodes[0].alt); 
        alert(destinationTD.childNodes[1].nodeName); 
    }
}

请让我知道为什么当两个问题行都存在时代码行为异常。另外，是否有类似函数只能删除单个节点，或者只有单个 removeChild 可以工作...？？？？？？我很困惑。

谢谢！

4

3 回答 3

1

排序-> http://jsfiddle.net/zAVFv/3/

TD 的第一个 childNode 是换行符而不是 img 元素....将数字增加 1 并且工作正常...在 prod 环境中使用似乎有点脆弱-除非您可以控制 HTML-也许看看使用getelementbytagname('img')反而 ？

于 2011-10-11T13:28:35.407 回答
0

啊……想通了。

问题是由于引用删除后不再存在的子节点而产生的错误。

例如，如果 sourceTD 有 3 个子节点，分别被引用为 childNodes[1] 和 childNodes[2]，那么在删除 sourceTD 的 lastChild 后，将不再有 childNodes[2]，因为只剩下 2 个并且没有第三个节点了。由于 JS 中的此错误，剩余的代码以某种方式被抑制并且无法运行。所以这就是destinationTD警报也被抑制的原因。

愚蠢的参考..！

谢谢大家，尤其是@ManseUK 的所有帮助

于 2011-10-11T13:47:56.720 回答
0

当你有两条线路时，你最终会打电话destinationTD.removeChild(destinationTD.lastChild);两次，所以两个孩子都会被移除。然后，您的 if 语句评估为 false，因为destinationTD没有子节点，因此您不会得到任何输出 - 在这种情况下，缺少输出证明代码正在运行，而不是证明它不是。

于 2011-10-11T13:02:56.787 回答