2

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

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

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

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

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

4

3 回答 3

2

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

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

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

于 2012-06-16T05:55:50.597 回答
1

您似乎对 jQuery 解决方案持开放态度，因此：

$("*")

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

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

$("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
于 2012-06-16T06:14:58.640 回答
0

我更喜欢使用以下方法：

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();
    }
};
于 2012-12-22T04:19:05.000 回答