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 回答