拦截 DOM 变化答案

【问题标题】：Intercepting DOM change拦截 DOM 变化
【发布时间】：2018-10-26 23:19:57
【问题描述】：

拜托，我真的不是程序员。

当孩子附加到 div 时，我需要拦截。

喜欢这个例子（没有超时）：

$(document).ready(function(){
  setTimeout(function(){
    $('#holder').append('<div id="device">Test</div>');}, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="holder">
    <!––child dynamicly inserted-->
  </div>
</body>

我使用了 mutationobserver 但接缝似乎已弃用...我看到了 proxy() 但我不知道如何使用它...

我的变异观察者代码：

  MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
    mutations.forEach(function(mutation) {  

        if ($('#main-view div.row').next().length != 0 ){
            DelRow();
        };

        $('#main-view div.row.divider .span4').toggleClass('span4 tile');

    });
});

    $( document ).ready(function() {
        if (!isMobile){ 
        observer.observe(targetedNode, {
            childList: true,
            subtree: true
        });

但不要在移动设备上工作..

【问题讨论】：

你用Mutation Observer 做了什么？
Mutation Observer 似乎仍然可用：developer.mozilla.org/en-US/docs/Web/API/MutationObserver
我用变异观察者MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var observer = new MutationObserver(function(mutations, observer) { mutation.forEach(function(mutation) { $('#main-view').contents().removeClass('container').toggleClass('container-fluid' ); $('#main-view div.row.divider .span4').toggleClass('span4 tile'); }); });不推荐使用要被观察者（）的接缝。但我真的不能说这是否是同一件事......developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript jquery dom mutation

【解决方案1】：

突变观察者工作得很好，并且不被弃用。我用它所有的时间。这是一个监听事件然后提醒是否添加或减去 div 的示例。尽量将本演示中的技术应用到您自己的用例中。

<div id="holder">
  <h2>Let's Add Div's Dynamically</h2>
</div>

<button id="button" type="button">Add New Div</button>

<script>
    const btn = $('#button');
    const holder = $('#holder');

    // append a new div to out holder element
    function addDiv(){
        holder.append('<div>A Great New Div!! :D</div>'); 
    }

    // attach click function to btn
    btn.click(addDiv);



    // Create an observer instance linked to the callback function
    var observer = new MutationObserver(function(mutationsList, observer) {
        $(mutationsList).each(function(index, item){
            if (item.type === 'childList'){

                if (item.addedNodes.length > 0){
                    alert('new div is being added!');
                }

                if (item.removedNodes.length > 0){
                    alert('div has been removed'); 
                }

            }
        });
    });

    // Start observing the target node for configured mutations
    observer.observe(holder[0], { 
        attributes: true, 
        childList: true, 
        subtree: true 
    });
</script>

JS Fiddle Demo

【讨论】：

如果我只是使用它，它会告诉我：TypeError: Argument 1 of MutationObserver.observe is not an object。如果我听文件（observer.observe（document，...），它会工作...
您的评论对我来说没有意义。如果它有效，那就太好了！如果它不起作用，请发布所有必要的代码以便我查看。
是的，我明白。我可以发布代码，但它不是我的。这是项目：github.com/domoticz/domoticz/blob/…我只是想知道，当一个孩子被添加到#main-view
我可以修改代码吗，怎么说'如果将子 div #dashcontent 添加到 div #main-view"（或#holder）？
并且 mutationobserver 没有被弃用，但是 observe() 接缝是：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…