2

だから私はDOMのキャッシュを構築しようとしました:

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

ただし、DOM 変数は動的参照のように見えるため、DOM 内の要素を変更すると、DOM変数も変更されます。

DOM変数を反復処理し、cloneNodeメソッドを使用して各ノードのディープ コピーを作成してみました。これは、DOM を変更しても変更されないという点で機能します。===ただし、問題は、複製されたノードを演算子で比較すると、元の DOM ノードと等しくないことです。

要約すると、変更されないがノードが元の DOM ノードと等しい DOM のキャッシュを作成しようとしています。

4

3 に答える 3

2

document.getElementsByTagName「ライブ」を返しますが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 に答える