如何建立DOM的高速緩存，這並不能改變

於是，我就建DOM的緩存：如何建立DOM的高速緩存，這並不能改變

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

然而，DOM變量似乎是一個動態的參考，因此，如果我改變DOM中的元素，DOM變量也是如此。

我試着迭代通過DOM變量，並使用cloneNode方法來創建每個節點的深層副本。這在我更改DOM時不會改變。但是，問題在於，當您將克隆的節點與===運算符進行比較時，克隆的節點不等於其原始DOM節點。所以總結一下，我正在創建一個不改變但是其節點仍然等於原始DOM節點的DOM緩存。

來源

2012-06-16 user730569

我不認爲這是一個標籤'<*>'...你的意思是'文件.querySelectorAll（「*」）'？ –

@Derek'「*」'gEBTN'對於查詢選擇器像'「*」'起作用，只需測試它：P – Esailija

@Esailija - WOOT！之前不知道。謝謝。 –

document.getElementsByTagName返回一個「活」NodeList，這不是你所想的。當您訪問列表時，每次都會遍歷DOM（實現可能會緩存它）以獲取結果。這給列表生活的錯覺。

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

要做你想做的，只需將其轉換爲數組。 DOM = [].slice.call(DOM)

來源

2012-06-16 05:55:50 Esailija

先得一個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-16 06:14:58 nnnnnn

我更喜歡使用以下方法：

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-22 04:19:05

如何建立DOM的高速緩存，這並不能改變

回答

相關問題