Question

我已经实现了一个例程来对xhtml表进行排序，该表基于（=或多或少的复制）Nicholas C. Zakas， Web开发人员的专业JavaScript ，Ch。 12.它的工作方式与广告一样，但我对代码的工作方式有一些疑问，并对建议表示感谢。以下是相关内容：

var oldTable = document.getElementById('myTable');
var oldTableBody = oldTable.tBodies[0];
var oldTableRows = oldTableBody.rows;
var newTableArray = new Array();
for (var i = 0, rowCount = oldTableRows.length; i < rowCount; i++) {
    newTableArray.push(oldTableRows[i]);
}
newTableArray.sort(chooseSort);
var newFragment = document.createDocumentFragment();
for (var i = 0, rowCount = newTableArray.length; i < rowCount; i++) {
    newFragment.appendChild(newTableArray[i]);
}
oldTableBody.appendChild(newFragment);

我知道当我将新值推送到newTableArray时，我正在添加指向现有表行的指针，但我不确定appendChild方法是如何工作的。具体做法是：

当我将每个数组项（指向原始行的指针）附加到文档片段时，我只是添加一个指针（将该行保留在原始表中），或者我是否删除了行对象从原始表中将其附加到其他地方？
当我将newFragment追加到oldTableBody时，如果我理解正确的话，我实际上并不是将片段作为对象附加，而是附加到我的行对象，这就是片段的工作方式。这是对的吗？
当我将newFragment追加到oldTableBody时，我没有做任何明确的事情来删除原来的行。他们去哪儿了？是否重新附加它们会自动删除它们的任何旧痕迹，因为它们只能附加一次？如果我正在使用指针，而不是对象本身（我认为是什么让我将它们附加到newTableArray而不会自动使它们从表中消失），这是否意味着我可以有多个指针指向在某些情况下（oldTable加newTableArray）而不是其他对象（原始表中的原始行加上我正在添加的新排序行）？

为天真的问题道歉，但虽然得到我想要的结果令人满意，但不了解代码的工作方式让我感到不安。

Answer 1

我认为你所有的问题归结为询问appendChild的作用。它将元素从DOM中删除，并将 相同的 元素放在新位置。

Answer 2

你的第二个断言是正确的。您不是在创建指针，而是将对象重定位到文档片段中。
您对文档片段的理解是正确的。它是一个永远不会成为DOM的一部分的通用容器。而是附加其内容。
与第一项有关。将它们附加到片段时，您将它们从表中删除。将它们添加到Array时，它只是一个指向行对象的指针。向Array添加元素不会操纵DOM本身。

因此，您的代码最终是：

进行迭代以将每个表行引用到数组
对Array执行迭代以将每行重定位到文档片段
将片段的内容附加到原始表中

...导致DOM没有明显变化。

如果您希望复制行，可能会对.cloneNode()方法感兴趣。

但是不，你不能让一个元素出现在DOM的几个不同的地方，这样一个位置的元素更新将反映在其他位置。

旧物体在哪里？

2 个答案: