Question

正如您在下面的代码中所见，我在字符串中有一个html代码段，然后将其解析为文档。但是，当我遍历它并获得集合中的项目时，只有其他所有项目都可以访问。另外，还会发生一些行为，例如丢失收藏中的一个物品，最终只剩下两个物品。

JSFiddle-https://ieftimov.com/test-doubles-theory-minitest-rspec

var response = "<option value='Bobs Dock'>Bobs Dock</option><option 
value='Johns Dock'>Johns Dock</option><option value='Mikes Dock'>Mikes Dock</option><option value='Jacob Dock'>Jacob Dock</option><option value='Foo Dock'>Foo Dock</option>"

parser = new DOMParser();
doc = parser.parseFromString("<select>" + response + "</select>", "text/html");
var options = doc.getElementsByTagName("option");

for(i=0; i<options.length; i++){
    console.log(i, options.length);
    document.getElementById("list").append(options[i]);
}

迭代结果如下：

index - 1 options.length - 3
index - 2 options.length - 2

任何人都可以解释为什么此实现如此操作吗？

请注意：我了解如何获得结果（如https://jsfiddle.net/hari7190/xpvt214o/878427/），但是我正在寻找一种解释，说明上述代码为何如此行事。

Answer 1

答案在于append函数。您会看到append（基于更标准的appendChild）函数添加了节点，并将其与当前父节点分离。

请参见documentation：

Node.appendChild（）方法将节点添加到列表的末尾指定父节点的子节点。如果给定的孩子是参考到文档中的现有节点，appendChild（）将其从文档中移到当前职位到新职位（不需要将节点从其父节点移除，然后再将其附加到其他节点节点）。

现在，这些option节点的当前父节点是您的select节点。现在，您的options变量-看起来像是一个数组，但实际上是一个HTMLCollection。再次，从documentation：

HTML DOM中的HTMLCollection处于活动状态；它会自动更新更改基础文档时。

因此，在循环中，每次append元素时，都会将附加元素从select节点中删除，HTMLCollection options会看到并变短，但是由于{{ 1}}递增，则跳过一个元素。

要亲自查看，可以在jsfiddle中添加i行，并在浏览器中逐行调试。

HTMLCollection在访问时似乎丢失了所有其他元素

1 个答案: