JS MutationObserver监听DOM元素改变

JS MutationObserver监听DOM元素改变:

// 目标容器
const chatSection = document.querySelector('section.chat');
 
if (!chatSection) {
    console.error('未找到容器');
} else {
    // 解析详细数据的函数
    function parseChatData() {
        console.log('解析到的用户数据......');
    }
    // 创建 MutationObserver 监听 DOM 变化
    const observer = new MutationObserver((mutationsList) => {
        console.log('内容发生变化，开始解析数据...');
        parseChatData(); // 解析详细数据
    });
 
    // 配置 MutationObserver
    const observerConfig = {
        childList: true, // 监听子节点变化
        subtree: true // 监听所有后代节点
    };
 
    // 开始监听
    observer.observe(chatSection, observerConfig);
    console.log('已启动聊天内容监听');
 
    // 添加一个 div 元素来触发内容改变
    function addDivToChatSection() {
        const newDiv = document.createElement('div');
        newDiv.textContent = '这是一个新添加的 div 元素';
        newDiv.className = 'test-div'; // 添加类名（可选）
        chatSection.appendChild(newDiv); // 将 div 添加到聊天容器中
        console.log('已添加 div 元素');
    }
 
    // 测试：添加 div 元素
    addDivToChatSection();