Bộ chọn jQuery có thể được sử dụng với các nhà quan sát đột biến DOM không?

Question

HTML5 bao gồm khái niệm về "mutation observers" để theo dõi các thay đổi đối với DOM của trình duyệt.

Gọi lại người quan sát của bạn sẽ được chuyển dữ liệu trông giống như đoạn mã DOM của cây. Tôi không biết liệu chúng có chính xác hay không và chúng hoạt động như thế nào. Tuy nhiên, khi bạn đang viết mã để tương tác với trang web của bên thứ ba mà bạn không có quyền kiểm soát, hãy nói với tập lệnh Greasemonkey hoặc tập lệnh người dùng Google Chrome, bạn phải kiểm tra cây yếu tố được truyền để tìm thông tin nào có liên quan đến bạn.

Điều này đơn giản hơn nhiều với các bộ chọn, giống như làm việc với bất kỳ DOM nào, hơn là di chuyển cây theo cách thủ công, đặc biệt là đối với mã trình duyệt chéo.

Có cách nào để sử dụng bộ chọn jQuery với dữ liệu được chuyển tới lời gọi quan sát đột biến HTML5 không?

Answer 1

Có, bạn có thể sử dụng bộ chọn jQuery trên dữ liệu được trả về cho các callback quan sát đột biến.

See this jsFiddle.

Giả sử bạn có HTML như vậy:

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

Và bạn thiết lập một quan sát viên, như vậy:

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")); 
     } 
    }); 
} 

Bạn sẽ lưu ý rằng chúng ta có thể jQuery trên số mutation.removedNodes.

---

Nếu bạn sau đó chạy $(".myclass").html ("[censored!]"); từ giao diện điều khiển bạn sẽ có được điều này từ Chrome và Firefox:

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

đó cho thấy rằng bạn có thể sử dụng phương pháp lựa chọn jQuery bình thường trên các bộ nút trả lại.

Answer 2

Tôi đang làm việc trên một vấn đề rất giống với tập lệnh Stack Exchange tôi đang làm việc và tôi cần có khả năng giám sát DOM để thay đổi. Các tài liệu jQuery không có bất cứ điều gì hữu ích, nhưng tôi đã khám phá ra rằng sự kiện DOMNodeInserted làm việc trong Chrome:

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(); 
     } 
    } 
}); 

Tôi không chắc chắn 100% nếu điều này làm việc trong Firefox như tôi đã không nhận rằng đến nay chưa trong quá trình phát triển. Hi vọng điêu nay co ich!

Answer 3

tôi không có bất kỳ đoạn mã cá nhân cho thế này, nhưng tôi có ba nguồn tài nguyên có thể giúp:

• Mutabor Github Repository
• Article + JQuery Utility for Mutators
• "jquery-mutation-summary" - extension of mutation-summary (có lẽ là tốt nhất trong số ba)

Ví dụ từ liên kết # 3 'thư viện jquery-mutation-summary':

// 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

Tôi biết đây là câu hỏi cũ nhưng có lẽ điều này có thể giúp những người khác tìm kiếm giải pháp thay thế. Gần đây tôi đã học về các nhà quan sát đột biến và muốn thử nghiệm với việc sử dụng chúng cùng với jQuery. Tôi đã đưa ra hai cách tiếp cận có thể và biến chúng thành các plugin. Mã có sẵn here.

Phương pháp đầu tiên (jquery.observeWithEvents.js) sử dụng trigger() chức năng của jQuery để kích hoạt hoặc một sự kiện insertNode hoặc removeNode có thể bị ràng buộc để qua on() chức năng của jQuery. Cách tiếp cận thứ hai (jquery.observeWithCallbacks.js) sử dụng các tham số gọi lại truyền thống. Vui lòng xem README để biết các ví dụ và cách sử dụng.