惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - 司徒正美
Jina AI
Jina AI
Microsoft Azure Blog
Microsoft Azure Blog
博客园 - 三生石上(FineUI控件)
宝玉的分享
宝玉的分享
MyScale Blog
MyScale Blog
I
InfoQ
爱范儿
爱范儿
Microsoft Security Blog
Microsoft Security Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
Stack Overflow Blog
Stack Overflow Blog
T
Tailwind CSS Blog
D
DataBreaches.Net
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
The Blog of Author Tim Ferriss
B
Blog
阮一峰的网络日志
阮一峰的网络日志
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
月光博客
月光博客
雷峰网
雷峰网
Recent Announcements
Recent Announcements
量子位
B
Blog RSS Feed

博客园 - wgscd

Git 无法访问 GitHub(unable to access ‘https://github.com/.../.git‘)问题解决教程 RapidOcrNet文字识别OCR C#+Audio绘制麦克风波形 一共免费大模型API AI聊天对话界面的HTML代码。 纯JavaScript代码实现保存Canvas图片到电脑 WPF鼠标拖动改变图片透明度 Fiddler自定义规则保存图片和提示The system proxy was changed自动重连 缩放 div 浏览器语音识别-webkitSpeechRecognition HTML获取摄像头画面,拍照截图保存 JS摄像头手势识别-Handsfree.js HTML,JS 模拟聊天界面UI JS获取元素相对窗口的位置和大小 C# 判断是否安装了ffmpeg shadow-root中的元素定位方法 Webview2动态设置页面video的Blob进行播放 C# 文件分割和文件合并 WPF刮刮乐 JS利用浏览器进行语言识别 WPF设置默认语言地区CultureInfo VS2022推送代码 到github错误: CertGetCertificateChain trust error CERT_TRUST_IS_PARTIAL_CHAIN的解决办法 C#正则表达式匹配候选词 使用ffmpeg去除音频静音
JS MutationObserver监听DOM元素改变
wgscd · 2025-01-15 · via 博客园 - wgscd

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