Làm cách nào để giám sát DOM cho các thay đổi?

Question

Có cách nào - sử dụng jQuery hay không - để giám sát DOM để chèn, xóa, cập nhật các kiểu, v.v ...?

Answer 1

Xem các phần tử "MutationEvent" tại đây: https://developer.mozilla.org/en/DOM/DOM_event_reference nhưng các yếu tố này không còn được dùng nữa.

jQuery nay có thêm một cách để đính kèm các sự kiện để các thành phần hiện có và tương lai tương ứng với một selector: http://docs.jquery.com/Events/live#typefn

Nó có thể là một thủ thuật bạn có thể sử dụng vì thiếu đúng đắn DOM Node thông tin sửa đổi.

Answer 2

Xem thư viện mutation-summary. Nó được xây dựng trên đầu trang của một API trình duyệt mới được gọi là DOM Mutation Observers.

Answer 3

này chỉ dành cho mục đích gỡ lỗi:

Firebug hiện cho phép thiết lập breakpoint trên các nút html.

Bạn phải mở thanh tra html, nhấp chuột phải vào một nút và bạn có các tùy chọn sau:

• Interrupt về biến đổi thuộc tính
• Interrupt trên con thêm/gỡ bỏ
• Interrupt trên loại bỏ

Khi bạn đạt đến điểm ngắt, bạn cũng có thể duyệt qua ngăn xếp cuộc gọi.

Google Chrome cũng có tính năng tương tự.

Answer 4

Gần đây tôi đã viết một plugin mà không chính xác điều đó - jquery.initialize

Bạn sử dụng nó theo cùng một cách như .each chức năng

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

Sự khác biệt từ .each là - phải mất chọn của bạn, trong trường hợp này .some-element và đợi các phần tử mới có bộ chọn này trong tương lai, nếu phần tử như vậy sẽ được thêm vào, nó cũng sẽ được khởi tạo.

Trong trường hợp khởi tạo hàm của chúng tôi, chỉ cần thay đổi màu thành phần thành màu xanh lam. Vì vậy, nếu chúng tôi sẽ thêm phần tử mới (bất kể có thanh tra ajax hoặc thậm chí F12 hay bất kỳ thứ gì) như:

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

Plugin sẽ khởi động ngay lập tức. Ngoài ra, plugin đảm bảo một phần tử được khởi tạo chỉ một lần. Vì vậy, nếu bạn thêm yếu tố, sau đó .deatch() nó từ cơ thể và sau đó thêm nó một lần nữa, nó sẽ không được khởi tạo lại.

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

Plugin được dựa trên MutationObserver - nó sẽ làm việc trên IE9 và 10 với sự phụ thuộc như chi tiết trên readme page.