Javascript 如何构建不改变的DOM缓存

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

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

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

DOM

变量也会更改

我尝试遍历

DOM

变量，并使用

cloneNode

方法创建每个节点的深度副本。这是因为当我更改DOM时，它不会更改。但是，问题是当您将克隆节点与

==

操作符进行比较时，克隆节点并不等于其原始DOM节点

---

总而言之，我希望创建一个DOM缓存，该缓存不会改变，但其节点仍然与原始DOM节点相同。

文档。getElementsByTagName

返回一个“live”

节点列表，这与您的想法完全不同。当您访问列表时，每次都会遍历DOM（实现可能会缓存它）以获得结果。这给人一种列表处于活动状态的错觉

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

要执行所需操作，只需将其转换为数组
DOM=[].slice.call（DOM）
您似乎对jQuery解决方案持开放态度，因此：

$("*")

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

或者，如果您只需要
中的元素（即，不是
或
元素，等等），则：

作为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

我更喜欢使用以下方法：


或者，在此实现中，您可以使用方法替换DOM对象：

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

我认为没有标签。。。你是说
document.queryselectoral（“*”
？@Derek
“*”
对于
gEBTN
而言，其工作原理与查询选择器的工作原理类似，只需测试它：P@Esailija-呜！我以前不知道。谢谢
var myNS = {
    myEventHandler: function(event){
        this.DOM.$el.doSomething();
    },
    cacheDOM: function(){
        return {
             $el: $("#matrix")
        };
    },
    initialize: function(){
        this.DOM = this.cacheDOM();
    }
};