Phát hiện các thay đổi của DOM bằng trình quan sát đột biến

Paul Kinlan

Vào năm 2000, Mutation Events API đã được chỉ định để giúp nhà phát triển dễ dàng phản ứng với các thay đổi trong DOM (ví dụ: DOMNodeRemoved, DOMAttrModified, v.v.).

Tính năng này không được các nhà phát triển web sử dụng rộng rãi, nhưng lại là một trường hợp sử dụng rất tiện lợi và phổ biến cho Tiện ích Chrome nếu họ muốn thực hiện một số hành động khi có nội dung nào đó trên trang thay đổi.

Sự kiện đột biến rất hữu ích, nhưng đồng thời cũng gây ra một số vấn đề về hiệu suất. Các sự kiện diễn ra chậm và được kích hoạt quá thường xuyên theo cách đồng bộ, gây ra một số lỗi trình duyệt không mong muốn.

Được giới thiệu trong quy cách DOM4, Trình quan sát thay đổi DOM sẽ thay thế Sự kiện thay đổi. Trong khi Sự kiện đột biến kích hoạt các sự kiện chậm cho mỗi thay đổi, thì Trình quan sát đột biến nhanh hơn bằng cách sử dụng các hàm gọi lại có thể được phân phối sau nhiều thay đổi trong DOM.

Bạn có thể xử lý danh sách thay đổi theo cách thủ công mà API cung cấp hoặc sử dụng một thư viện như Tóm tắt đột biến để giúp công việc này dễ dàng hơn và tăng độ tin cậy về những thay đổi đã diễn ra trong DOM.

Bạn có thể bắt đầu sử dụng Trình quan sát đột biến trong Chrome Beta để phát hiện các thay đổi trong DOM và sẵn sàng sử dụng khi Chrome phát hành phiên bản ổn định (Chrome 18). Nếu bạn hiện đang sử dụng Sự kiện thay đổi không dùng nữa, chỉ cần chuyển sang Trình quan sát thay đổi.

Dưới đây là ví dụ về cách liệt kê các nút đã chèn bằng Sự kiện đột biến:

var insertedNodes = [];
document.addEventListener("DOMNodeInserted", function(e) {
    insertedNodes.push(e.target);
}, false);
console.log(insertedNodes);

Và đây là giao diện của nó với Mutation Observers:

var insertedNodes = [];
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
    for (var i = 0; i < mutation.addedNodes.length; i++)
        insertedNodes.push(mutation.addedNodes[i]);
    })
});
observer.observe(document.documentElement, { childList: true });
console.log(insertedNodes);