javascript - 如何建立一个不会改变的DOM缓存

Question

所以我尝试构建 DOM 的缓存:

var DOM = document.getElementsByTagName('*');

但是，DOM 变量似乎是动态引用，因此如果我更改 DOM 中的元素，DOM 变量也会更改。

我尝试遍历 DOM 变量并使用 cloneNode 方法创建每个节点的深拷贝。这是因为当我更改 DOM 时它不会更改。但是，问题是当您将克隆节点与 === 运算符进行比较时，克隆节点不等于其原始 DOM 节点。

总而言之，我希望创建一个 DOM 缓存，该缓存不会更改但其节点仍等于原始 DOM 节点。

Answer 1

document.getElementsByTagName 返回一个“实时”NodeList，这根本不是您所想的。当您访问列表时，每次都会遍历 DOM(实现可能会对其进行缓存)以获取结果。这给人一种列表正在运行的错觉。

document.getElementsByTagName("div") === document.getElementsByTagName("div") 
//true

要执行您想要的操作，只需将其转换为数组即可。 DOM = [].slice.call(DOM)