发现 JavaScript MutationObserver 的强大功能！

JavaScript 中的 MutationObserver API 提供了一种强大的方法来观察和响应 DOM 树中的更改。无论您是在监视子元素、属性的更新，还是节点中的文本内容，MutationObserver 都可以帮助您有效地处理这些更改。

MutationObserver 简介

什么是 MutationObserver ?

MutationObserver API 允许您监控 DOM 树中的更改。每当有修改时，都会执行指定的回调函数，使您能够动态地响应这些更改。

如何使用 MutationObserver ？

1、定义回调函数

   function callback(mutations) {
       mutations.forEach(mutation => {
           console.log(mutation);
       });
   }

2、创建 MutationObserver 对象

const observer = new MutationObserver(callback);

3、观察 DOM 变化

observer.observe(targetNode, { childList: true, attributes: true });

4、停止观察 DOM 更改

 observer.disconnect();

构造函数：创建 MutationObserver

MutationObserver()

要创建新的 MutationObserver 实例，请将回调函数传递给 MutationObserver 构造函数：

const observer = new MutationObserver(callback);

示例：

function logChanges(mutations) {
    mutations.forEach(mutation => {
        console.log(mutation);
    });
}

let observer = new MutationObserver(logChanges);

实例方法：控制 Observer

disconnect() 

disconnect() 方法阻止 MutationObserver 接收 DOM 更改的通知，直到再次调用其 observe() 方法。当您不再需要监视 DOM 或提高性能时，这可能很有用。

示例：

observer.disconnect();

observe() 

observe() 方法启动 MutationObserver 实例，允许它监视指定的 DOM 节点及其子树。

示例：

observer.observe(targetNode, {
    childList: true,
    attributes: true,
    subtree: true,
});

takeRecords() 

takeRecords() 方法返回一个数组，其中包含已检测到但尚未被回调处理的所有更改记录。

示例：

const records = observer.takeRecords();
records.forEach(record => {
    console.log(record);
});

具体实例

1、观察子元素更改 

HTML

<ul id="language">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<button id="btnAdd">Add</button>
<button id="btnRemove">Remove</button>

JavaScript

let list = document.querySelector('#language');
let btnAdd = document.querySelector('#btnAdd');
let btnRemove = document.querySelector('#btnRemove');

function log(mutations) {
    mutations.forEach(mutation => {
        if (mutation.type === 'childList') {
            console.log(mutation);
        }
    });
}

let observer = new MutationObserver(log);

observer.observe(list, { childList: true });

btnAdd.addEventListener('click', () => {
    let item = document.createElement('li');
    item.textContent = 'New Item';
    list.appendChild(item);
    console.log('Added new item');
});

btnRemove.addEventListener('click', () => {
    if (list.lastElementChild) {
        list.removeChild(list.lastElementChild);
        console.log('Removed last item');
    }
});

2、观察属性更改 

let div = document.querySelector('#myDiv');

function logAttributes(mutations) {
    mutations.forEach(mutation => {
        if (mutation.type === 'attributes') {
            console.log(mutation);
        }
    });
}

let observer = new MutationObserver(logAttributes);

observer.observe(div, { attributes: true });

div.setAttribute('data-test', 'newValue');
console.log('Updated data-test attribute');

3、观察子树更改

let parent = document.querySelector('#parent');

function logSubtreeChanges(mutations) {
    mutations.forEach(mutation => {
        if (mutation.type === 'childList' && mutation.addedNodes.length) {
            console.log(mutation);
        }
    });
}

let observer = new MutationObserver(logSubtreeChanges);

observer.observe(parent, { childList: true, subtree: true });

let child = document.createElement('div');
child.textContent = 'I am a new child!';
parent.appendChild(child);
console.log('Added a new child to the subtree');

4、观察字符数据更改

let textNode = document.querySelector('#textNode');

function logCharacterDataChanges(mutations) {
    mutations.forEach(mutation => {
        if (mutation.type === 'characterData') {
            console.log(mutation);
        }
    });
}

let observer = new MutationObserver(logCharacterDataChanges);

observer.observe(textNode, { characterData: true });

textNode.textContent = 'New Text Content';
console.log('Updated text content');

5、访问旧值

let div = document.querySelector('#myDiv');

function logOldValues(mutations) {
    mutations.forEach(mutation => {
        if (mutation.type === 'attributes') {
            console.log(`Old value: ${mutation.oldValue}`);
        }
    });
}

let observer = new MutationObserver(logOldValues);

observer.observe(div, { attributes: true, attributeOldValue: true });

div.setAttribute('class', 'newClass');
console.log('Changed class attribute');

结论

MutationObserver 是一个多功能且强大的工具，用于监控和响应 DOM 中的更改。通过了解其构造函数和方法，您可以有效地管理动态内容，并确保 Web 应用程序能够响应实时更新。