围绕HTMLCollections动态更新的优雅方法 [英] Elegant way around HTMLCollections updating dynamically

问题描述

今天，我在Javascript中发现了一些对我来说看起来像奇怪行为的东西。让我们假设以下最小示例：

Today, I discovered something in Javascript that looked like "strange behavior" to me. Let's assume the following minimal example:

HTML：

<div id="test">
    <span>1</span>
    <span>2</span>
</div>

JS：

var div   = document.getElementById('test');
var spans = div.getElementsByTagName('span');
div.removeChild(spans[0]);
div.removeChild(spans[1]);

（小提琴： http://jsfiddle.net/SkYJg/ ）

现在，在运行脚本时，出现错误：

Now, when running the script, I get an error:

TypeError：Node.removeChild的参数1不是对象。

TypeError: Argument 1 of Node.removeChild is not an object.

仔细一看，结果发现 spans [1] 为空在删除第一个后。实际上，以下代码

Looking closer, it turned out that spans[1] is null after the first one was removed. And indeed, the following code

var div   = document.getElementById('test');
var spans = div.getElementsByTagName('span');
console.log(spans.length);
div.removeChild(spans[0]);
console.log(spans.length);
div.removeChild(spans[1]);

在第一个日志操作中收益 2 ，但是第二次 1 。

yields 2at the first log operation, but 1 the second time.

现在，很清楚这里发生了什么：第一次跨度之后？已从DOM中删除， HTMLCollection 存储在 spans 内也不是什么原因。

Now, it's pretty clear what happens here: after the first ?span? was removed from DOM, it's not part fo that HTMLCollection stored inside spans anymore either.

我总是给人印象，即 HTMLCollection -Object包含对其包含的所有对象的引用。创建收藏集后，我没有在任何地方进行修改。因此，我以为（但显然是错误的）集合的行为就像一个数组：引用一直呆在那里，直到我手动删除/修改它们为止。

I always was under the impression, that the HTMLCollection-Object holds references to all objects that it contains. I didn't modify the collection anywhere after creating it. So I thought (but it was wrong, obviously) that the collection would behave like an array: references stay there until I delete/modify them manually.

我看着 MDN上的规范。而且，实际上，richt在顶部显示： HTML DOM中的HTMLCollections是活动的；当基础文档更改时，它们会自动更新。

I looked into the specification at MDN. And, indeed, richt at the top it says: HTMLCollections in the HTML DOM are live; they are automatically updated when the underlying document is changed.

我想防止这种情况的唯一方法就是在使用它执行任何操作，将所有引用复制到数组，然后使用该数组访问它们。但这对我来说真是太可怕了……有更好的解决方案吗？像是使集合静态化或在不循环的情况下进行复制的某种方式？

The only way I could think of to prevent this is to loop over the collectino before doing anything with it, copying all references to an array, and use the array to access them afterwards. But that just looks so horribly bulky to me... is there a nicer solution? Like some way to make the collection static or to copy it without looping?

（在最小的示例中，我可以删除 spans [0] 当然，但实际上并不是那么简单。）

(in the minimal example I could just remove spans[0] twice, of course, but it isn't that simple in reality).

：看到@Teemu的回答后，我重复一下：在我的真实代码中并不是那么简单（一个代码太复杂而无法在此处完整显示）。我向您保证，我真的需要随机访问该collection中的所有元素，无论是否删除。

: After seeing @Teemu's answer, I repeat: it's NOT that simple in my real code (that one is just too complex to show it here completely). I assure you, I really need random access to all elements that were inside that Collection, deleted or not.

推荐答案

门将使用 querySelectorAll（） 而不是 getElementsByTagName（），它返回一个无效的 NodeList 。

A back-gate would be to use querySelectorAll() instead of getElementsByTagName(), it returns a non-live NodeList.

这篇关于围绕HTMLCollections动态更新的优雅方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！