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

推荐订阅源

有赞技术团队
有赞技术团队
Stack Overflow Blog
Stack Overflow Blog
爱范儿
爱范儿
B
Blog
博客园 - 三生石上(FineUI控件)
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
A
About on SuperTechFans
C
Check Point Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
P
Proofpoint News Feed
Engineering at Meta
Engineering at Meta
Y
Y Combinator Blog
WordPress大学
WordPress大学
小众软件
小众软件
博客园 - 司徒正美
Apple Machine Learning Research
Apple Machine Learning Research
Recent Announcements
Recent Announcements
L
LangChain Blog
大猫的无限游戏
大猫的无限游戏
阮一峰的网络日志
阮一峰的网络日志
D
DataBreaches.Net
博客园 - 聂微东
Microsoft Security Blog
Microsoft Security Blog
美团技术团队

博客园 - 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();