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

Paul Kinlan

Từ năm 2000, API Sự kiện thay đổi đã được chỉ định để giúp các 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 nó cho thấy một trường hợp sử dụng rất thuận tiện và phổ biến cho Tiện ích của Chrome nếu họ muốn thực hiện một số thao tác khi 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 tạo ra một số vấn đề về hiệu suất. Các Sự kiện có tốc độ chậm và các Sự kiện được kích hoạt quá thường xuyên một cách đồng bộ, gây ra một số lỗi không mong muốn cho trình duyệt.

Được ra mắt trong thông số kỹ thuật DOM4, Trình quan sát đột biến DOM sẽ thay thế Sự kiện đột biến. Trong khi Sự kiện đột biến kích hoạt các sự kiện chậm cho mỗi thay đổi một, thì Trình quan sát đột biến nhanh hơn bằng cách sử dụng các hàm callback 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 thư viện như Tóm tắt thay đổi để thực hiện công việc này dễ dàng hơn và thêm một lớp tin cậy về các 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 trở thành phiên bản chính thức (Chrome 18). Nếu bạn hiện đang sử dụng Sự kiện đột biến không dùng nữa, chỉ cần di chuyển sang Trình quan sát đột biến.

Dưới đây là ví dụ về danh sách các nút được chèn có Sự kiện đột biến:

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

Dưới đây là giao diện của Mutation Observer:

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