JS监听DOM创建和销毁

源码

web开发指南

复制代码
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            var targetNode = document.querySelector("body");
            var observerOptions = {
                childList: true, // 观察目标子节点的变化,是否有添加或者删除
                attributes: true, // 观察属性变动
                subtree: true // 观察后代节点,默认为 false
            }

            var observer = new MutationObserver(function(mutationList, observer) {
                mutationList.forEach((mutation) => {
                    console.log(mutation)
                });
                console.log(observer)
            });
            observer.observe(targetNode, observerOptions);

            /**
             * 创建节点
             */
            const createEl = () => {
                let el = document.createElement('div');
                el.className = 'preRenderContainer'
                el.append(new Text('我是动态添加的节点'));
                document.body.append(el)
            }

            /**
             * 删除节点
             */
            const deleteEl = () => {
                document.getElementsByClassName('preRenderContainer')[0].remove();
            }
        </script>
        <button onclick="createEl()">创建DOM</button>
        <button onclick="deleteEl()">删除DOM</button>
    </body>
</html>
复制代码

效果图

 

posted @   天葬  阅读(708)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示