क्या jQuery चयनकर्ताओं को डीओएम उत्परिवर्तन पर्यवेक्षकों के साथ उपयोग किया जा सकता है?

Question

एचटीएमएल 5 ब्राउज़र के डीओएम में परिवर्तनों की निगरानी के लिए "mutation observers" की अवधारणा शामिल है।

आपका पर्यवेक्षक कॉलबैक डेटा पास किया जाएगा जो DOM पेड़ स्निपेट की तरह दिखता है। मुझे नहीं पता कि वे वास्तव में हैं या वे वास्तव में कैसे काम करते हैं।

लेकिन जब आप किसी तृतीय पक्ष साइट के साथ बातचीत करने के लिए कोड लिख रहे हैं जिस पर आपका कोई नियंत्रण नहीं है, तो Greasemonkey स्क्रिप्ट या Google क्रोम उपयोगकर्ता स्क्रिप्ट के साथ कहें, आपको यह जानने के लिए पास की गई तत्वों के पेड़ का निरीक्षण करना होगा कि कौन सी जानकारी है आप के लिए प्रासंगिक

यह चयनकर्ताओं के साथ बहुत आसान है, जैसे किसी भी डोम के साथ काम करना, पेड़ को मैन्युअल रूप से चलने से, खासकर क्रॉस-ब्राउज़र कोड के लिए।

क्या एचटीएमएल 5 उत्परिवर्तन पर्यवेक्षक कॉलबैक को पारित डेटा के साथ jQuery चयनकर्ताओं का उपयोग करने का कोई तरीका है?

Answer 1

हां, आप उत्परिवर्तन पर्यवेक्षक कॉलबैक पर लौटाए गए डेटा पर jQuery चयनकर्ताओं का उपयोग कर सकते हैं।

See this jsFiddle.

मान लीजिए आप तो जैसे HTML था:

<span class="myclass"> 
    <span class="myclass2">My <span class="boldly">vastly</span> improved</span> 
    text. 
</span> 

और तुम तो जैसे एक पर्यवेक्षक निर्धारित करते हैं,:

var targetNodes   = $(".myclass"); 
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; 
var myObserver   = new MutationObserver (mutationHandler); 
var obsConfig   = { childList: true, characterData: true, attributes: true, subtree: true }; 

//--- Add a target node to the observer. Can only add one node at a time. 
targetNodes.each (function() { 
    myObserver.observe (this, obsConfig); 
}); 

function mutationHandler (mutationRecords) { 
    console.info ("mutationHandler:"); 

    mutationRecords.forEach (function (mutation) { 
     console.log (mutation.type); 

     if (typeof mutation.removedNodes == "object") { 
      var jq = $(mutation.removedNodes); 
      console.log (jq); 
      console.log (jq.is("span.myclass2")); 
      console.log (jq.find("span")); 
     } 
    }); 
} 

आप ध्यान दें हूँ कि हम पर jQuery कर सकते हैं mutation.removedNodes।

---

आप तो सांत्वना से $(".myclass").html ("[censored!]"); चलाते हैं तो आप Chrome और Firefox से मिल जाएगा:

mutationHandler: 
childList 
jQuery(<TextNode textContent="\n ">, span.myclass2, <TextNode textContent="\n text.\n ">) 
true 
jQuery(span.boldly) 

से पता चलता है कि आप वापस आ नोड सेट पर सामान्य jQuery चयन तरीकों का उपयोग कर सकते हैं।

Answer 2

मैं एक स्टैक एक्सचेंज स्क्रिप्ट के लिए एक बहुत ही समान समस्या पर काम कर रहा था जिस पर मैं काम कर रहा हूं, और मुझे परिवर्तनों के लिए डीओएम की निगरानी करने में सक्षम होना चाहिए। jQuery डॉक्स कुछ भी उपयोगी नहीं था, लेकिन मैं की खोज की थी कि DOMNodeInserted घटना क्रोम में काम करता है:

document.addEventListener("DOMNodeInserted", function(event){ 
    var element = event.target; 

    if (element.tagName == 'DIV') { 
     if (element.id == 'seContainerInbox') { 
      //alert($('#seContainerInbox').parent().get(0).tagName); 
      trimStoredItems(); 
      $('#seTabInbox').click(); 
      // var newCount = getNewCount(); 
      // if there are new inbox items, store them for later 
      storeNewInboxItems(); 
      applyNewStyleToItems(); 
     } 
    } 
}); 

मैं 100% यकीन नहीं है अगर यह फ़ायरफ़ॉक्स में काम करता है के रूप में मुझे लगता है कि अब तक अभी तक नहीं मिला है विकास प्रक्रिया में। उम्मीद है की यह मदद करेगा!

Answer 3

मैं इस एक के लिए किसी भी व्यक्तिगत कोड के टुकड़े की जरूरत नहीं है, लेकिन मैं तीन संसाधन सहायता कर सकते है:

• Mutabor Github Repository
• Article + JQuery Utility for Mutators
• (इन तीन में से शायद सबसे अच्छा) "jquery-mutation-summary" - extension of mutation-summary लिंक # से

उदाहरण 3 'jQuery-उत्परिवर्तन सारांश' पुस्तकालय:

// Use document to listen to all events on the page (you might want to be more specific) 
var $observerSummaryRoot = $(document); 

// Simplest callback, just logging to the console 
function callback(summaries){ 
    console.log(summaries); 
} 

// Connect mutation-summary 
$observerSummaryRoot.mutationSummary("connect", callback, [{ all: true }]); 

// Do something to trigger mutationSummary 
$("<a />", { href: "http://joelpurra.github.com/jquery-mutation-summary"}).text("Go to the jquery-mutation-summary website").appendTo("body"); 

// Disconnect when done listening 
$observerSummaryRoot.mutationSummary("disconnect"); 

Answer 4

मुझे पता है कि यह एक पुराना सवाल है, लेकिन शायद यह वैकल्पिक समाधानों की खोज करने में दूसरों की मदद कर सकता है। मैंने हाल ही में उत्परिवर्तन पर्यवेक्षकों के बारे में सीखा और jQuery के साथ उनका उपयोग करने के साथ प्रयोग करना चाहता था। मैं दो संभावित दृष्टिकोण के साथ आया और उन्हें प्लगइन में बदल दिया। कोड here उपलब्ध है।

पहले दृष्टिकोण (jquery.observeWithEvents.js) या तो एक insertNode या removeNode घटना है जो jQuery के on() समारोह के माध्यम से करने के लिए बाध्य किया जा सकता है को गति प्रदान करने jQuery के trigger() समारोह उपयोग करता है। दूसरा दृष्टिकोण (jquery.observeWithCallbacks.js) पारंपरिक कॉलबैक पैरामीटर का उपयोग करता है। उदाहरण और उपयोग के लिए कृपया README पर एक नज़र डालें।