MutationObserver
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Giao diện MutationObserver cung cấp khả năng theo dõi các thay đổi được thực hiện trên cây DOM. Nó được thiết kế để thay thế cho tính năng Mutation Events cũ hơn, vốn là một phần của đặc tả DOM3 Events.
Constructor
MutationObserver()-
Tạo và trả về một
MutationObservermới, sẽ gọi một hàm callback được chỉ định khi có thay đổi DOM xảy ra.
Phương thức thể hiện
disconnect()-
Ngừng thể hiện
MutationObservernhận thêm thông báo cho đến khi và trừ khiobserve()được gọi lại. observe()-
Cấu hình
MutationObserverđể bắt đầu nhận thông báo thông qua hàm callback của nó khi các thay đổi DOM khớp với các tùy chọn đã cho xảy ra. takeRecords()-
Xóa tất cả thông báo đang chờ khỏi hàng đợi thông báo của
MutationObservervà trả về chúng trong mộtArraymới gồm các đối tượngMutationRecord.
Ví dụ
Ví dụ sau được điều chỉnh từ bài viết blog này.
// Chọn nút sẽ được theo dõi để phát hiện biến đổi
const targetNode = document.getElementById("some-id");
// Tùy chọn cho observer (theo dõi những biến đổi nào)
const config = { attributes: true, childList: true, subtree: true };
// Hàm callback sẽ được thực thi khi phát hiện biến đổi
const callback = (mutationList, observer) => {
for (const mutation of mutationList) {
if (mutation.type === "childList") {
console.log("Một nút con đã được thêm hoặc xóa.");
} else if (mutation.type === "attributes") {
console.log(`Thuộc tính ${mutation.attributeName} đã được sửa đổi.`);
}
}
};
// Tạo một thể hiện observer liên kết với hàm callback
const observer = new MutationObserver(callback);
// Bắt đầu theo dõi nút đích cho các biến đổi đã cấu hình
observer.observe(targetNode, config);
// Sau này, bạn có thể ngừng theo dõi
observer.disconnect();
Thông số kỹ thuật
| Specification |
|---|
| DOM # interface-mutationobserver |