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)

Answer 2

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

$("*")

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

或者，如果您只想要来自<body>的{{1}}（即，不是<script>或<meta>元素等）中的元素，那么：

<head>

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

$("body *")

Answer 3

我更喜欢使用以下方法：

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();
    }
};

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

3 个答案: