元素引用在修改容器的内部 HTML 属性时中断

Element reference breaks on modification of innerHTML property of container

本文关键字：HTML 内部 属性 中断 引用 修改 元素      更新时间：2023-09-26

通过代码创建元素时，我遇到了一个问题，即修改元素的innerHTML属性会破坏对修改之前注入到修改元素中的其他元素的任何引用。

我这里有一个测试用例：http://jsfiddle.net/mJ7bF/1/我希望link1引用的行为与link2完全相同。

第二个测试用例是相同的代码，但我不是使用 innerHTML 属性添加 <br> 标记，而是使用对象创建换行符。 此测试的行为符合预期：http://jsfiddle.net/K4c9a/2/

我的问题不是关于这个特定的代码，而是它背后的概念：第一个测试用例中的link1引用会发生什么？如果它不引用当cont节点注入文档时可见的 HTML/DOM 节点，它指的是什么，它如何与 javascript 对象的 ByReference 性质相适应？

这里很少

的事情。

首先，字符串是不可变的，因此执行element.innerHTML += "<br>"就像完全读取和重写一样。

第二，为什么不好：

除了性能之外，Mootools（和jQuery）为所有引用的元素分配特殊的唯一顺序UID。 您可以通过调用元素上的选择器或创建元素等来引用元素。

然后考虑那个特定的元素，uid说 5。 uid链接到一个名为 Storage 的特殊对象，该对象位于闭包后面（因此是私有的）。 它以uid作为键。

然后，元素存储工作在element.store("key", value")和element.retrieve("key")

最后，为什么这很重要：events被存储在元素存储中（例如，存储[5]['events']） - 如果你好奇，请做element.retrieve（"events"）并在fireBug中探索它。

当你重写内部HTML时，旧元素将停止存在。 然后重新创建它，但事件处理程序和对之前绑定的函数的引用将不再工作，因为它现在将获得新的uid。

就是这样，希望它有意义。

要添加 BR，只需new Element("br").inject(element)或为该批次创建一个模板化片段（最快）并添加 1 大块，然后在之后添加事件。

HTML在

内部由DOM对象结构表示。 有点像传统编程语言中的树类。 如果设置 innerHTML，则会销毁父节点中的先前节点，解析新的 innerHTML，并创建新对象。 引用不再相同。

div
|-- a..

上面的div 对象包含一个作为子对象的 Anchor 对象。 现在，将变量 link1 设置为对此 Anchor 对象的地址的引用。 然后 .innerHTML 被+= "<br />" ，这意味着div 的所有节点都被移除，并根据 .innerHTML 新值的解析结果动态重新创建。 现在，旧引用不再有效，因为 Anchor 标记已重新创建为新的对象实例。

相关文章：