मैं परिवर्तनों के लिए डोम की निगरानी कैसे करूं?

Question

क्या कोई तरीका है - jQuery का उपयोग करना या अन्यथा - प्रविष्टियों, हटाने, शैलियों के अपडेट आदि के लिए डीओएम की निगरानी करने के लिए?

Answer 1

यहां "MutationEvent" तत्व देखें: https://developer.mozilla.org/en/DOM/DOM_event_reference लेकिन उनको बहिष्कृत किया गया है। http://docs.jquery.com/Events/live#typefn

यह एक चाल आप उचित डोम नोड संशोधन की जानकारी की कमी के लिए इस्तेमाल कर सकते हैं हो सकता है:

jQuery अब एक तरह से एक चयनकर्ता के लिए इसी मौजूदा और भविष्य तत्वों के लिए घटनाओं को संलग्न करने की सुविधा है।

Answer 2

mutation-summary लाइब्रेरी देखें। यह डीओएम उत्परिवर्तन पर्यवेक्षकों नामक एक नए ब्राउज़र एपीआई के शीर्ष पर बनाया गया है।

Answer 3

यह वह जगह है केवल डीबगिंग उद्देश्यों के लिए:

Firebug वर्तमान में एचटीएमएल नोड्स पर breakpoints स्थापित करने की अनुमति देता है।

आप html निरीक्षक को खोलने के लिए, सही एक नोड पर क्लिक करें और आप निम्नलिखित विकल्प हैं:

• इंटरप्ट विशेषता परिवर्तन
• इंटरप्ट बच्चे पर पर जोड़ें/निकालें
• इंटरप्ट को दूर
पर

एक बार जब आप ब्रेकपॉइंट तक पहुंच जाते हैं तो आप कॉल स्टैक भी ब्राउज़ कर सकते हैं।

Google क्रोम की एक समान सुविधा भी है।

Answer 4

मैं हाल ही में है कि वास्तव में करता है एक प्लगइन लिखा है - jquery.initialize

आप .each समारोह के रूप में एक ही तरह से इसका इस्तेमाल

$(".some-element").initialize(function(){ 
    $(this).css("color", "blue"); 
}); 

.each से अंतर है - यह इस मामले में अपने चयनकर्ता लेता है, .some-element और भविष्य में इस चयनकर्ता के साथ नए तत्वों की प्रतीक्षा करें, यदि ऐसा तत्व जोड़ा जाएगा, तो इसे भी शुरू किया जाएगा।

हमारे मामले में कार्य शुरू करने के लिए केवल तत्व रंग को नीले रंग में बदलें। तो अगर हम नए तत्व (कोई बात नहीं ajax या यहाँ तक कि F12 निरीक्षक या कुछ भी साथ हैं) की तरह जोड़ देंगे:

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color! 

प्लगइन यह तुरन्त init होगा। प्लगइन भी सुनिश्चित करता है कि एक तत्व केवल एक बार शुरू किया गया है। तो यदि आप तत्व जोड़ते हैं, तो .deatch() इसे शरीर से और फिर इसे फिर से जोड़ें, इसे फिर से शुरू नहीं किया जाएगा।

$("<div/>").addClass('some-element').appendTo("body").detach() 
    .appendTo(".some-container"); 
//initialized only once 

प्लगइन MutationObserver पर आधारित है - यह निर्भरता के साथ IE9 पर काम करते हैं और 10 के रूप में readme page पर विस्तृत जानकारी दी।