我正在尝试编写一个脚本,该脚本将在元素存在时用另一个元素替换一个元素。这意味着我需要在创建该元素后立即替换它,包括在加载页面时。
我尝试过使用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);
很明显,我可以每秒钟检查一次元素并将其替换掉,但我怀疑这是否非常出色,当然也不优雅。
如何在任何时候检测一个元素的创建或存在,以便用另一个元素替换它?
您可以监听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);
我本想找到一种方法来检测添加的元素,但我发现了一种成功的方法,即检测父元素的任何更改,然后搜索元素并替换它
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);
})
});