Question

我正在尝试编写一个脚本，只要它存在，就会将一个元素替换为另一个元素。这意味着我需要在创建元素时立即替换它，包括页面加载时。

我尝试过使用MutationObserver无济于事。

var target = document.querySelector('#taskboard');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
        if($(mutation.target).is('div.someClass')){
            //Do a thing
        } 
  });     
});

config = { attributes: true, childList: true, characterData: true , subtree: true};

observer.observe(target, config);

我显然可以每秒检查一下这个元素并替换它，但我怀疑它的性能非常高，而且肯定不是很优雅。

如何随时检测元素的创建或存在，以便我可以用其他元素替换它？

Answer 1

您可以收听dom更改

var cb = function(e){
  var elems = document.querySelectorAll('watchElem');
  console.log(elems);
  // do what you need to replace the elements
}
window.addEventListener("DOMContentLoaded", function () {
    var el = document.documentElement;
      el.addEventListener('DOMSubtreeModified', cb, false);
      el.addEventListener('DOMNodeInserted', cb, false);
      el.addEventListener('DOMNodeRemoved', cb, false);
  }, false);

Answer 2

我希望找到一种方法来检测正在添加的元素，但我发现成功检测到对父级的任何更改，然后搜索元素并替换它。这是脚本的最终近似值：

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observeDOM = (function(){
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    return function(obj, callback){
        if( MutationObserver ){
            // define a new observer
            var obs = new MutationObserver(function(mutations, observer){
                          callback();
                   });
            }
            // have the observer observe foo for changes in children
            obs.observe( obj, { childList:true, subtree:true , attributes: true, characterData: true});
        }
})();

// Observe a specific DOM element:
observeDOM( document.getElementById('a real ID') ,function(mutations){ 

        $('a valid selector').each(function(index, element){
             bb = $.parseHTML('valid html');
             $(element).replaceWith(bb);              
        })

});

只要存在一个元素就用另一个元素替换

2 个答案: