如何构建不会更改的 DOM 缓存

How to build a cache of the DOM that does not change

本文关键字：DOM 缓存 何构建 构建      更新时间：2023-09-26

所以我试图构建一个DOM的缓存：

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

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

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

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

document.getElementsByTagName返回一个"实时"NodeList，这根本不是你想的那样。当您访问列表时，每次都会遍历 DOM （实现可能会缓存它）以获得结果。这给人一种列表是实时的错觉。

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

要做你想做的事，只需将其转换为数组即可。 DOM = [].slice.call(DOM)

你似乎对jQuery解决方案持开放态度，所以：

$("*")

将返回一个包含所有元素的 jQuery 对象。它不会随着 DOM 的更改而更新。

或者，如果您只想在<body>中加入元素（即，不是<head>中的<script>或<meta>元素等），那么：

$("body *")

作为一个jQuery对象，它当然允许你访问jQuery方法，但你也可以使用数组符号直接访问DOM元素：

var DOM = $("body *");
DOM.show();              // example jQuery method call
alert(DOM.length);       // show count of elements in DOM
alert(DOM[4].value)      // example of direct access to fifth DOM element

我更喜欢使用以下方法：

https://gist.github.com/3841424#file-domcache-js

或者，您可以将 DOM 对象替换为此实现中的方法：

var myNS = {
    myEventHandler: function(event){
        this.DOM.$el.doSomething();
    },
    cacheDOM: function(){
        return {
             $el: $("#matrix")
        };
    },
    initialize: function(){
        this.DOM = this.cacheDOM();
    }
};
相关文章：