该接口用来观察节点变化,MutationObserver是一个构造器,接收一个回调函数callback用来处理节点变化时所做的操作。 var observe = new MutationObserver(mutationCallback) var observe = new MutationObserver(mutationCallback) observe.observe(dom, config)// 后面介绍config的配置 var observe = new MutationObserver(mutationCallback) observe.disconnect() var observe = new MutationObserver(mutationCallback) var record = observe.takeRecords() let config = { attributes: true, //目标节点的属性变化 childList: true, //目标节点的子节点的新增和删除 characterData: true, //如果目标节点为characterData节点(一种抽象接口,具体可以为文本节点,注释节点,以及处理指令节点)时,也要观察该节点的文本内容是否发生变化 subtree: true, //目标节点所有后代节点的attributes、childList、characterData变化 } <div id="h">123123</div> <script> window.onload=function(){ // Firefox和Chrome早期版本中带有前缀 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver // 选择目标节点 var target = document.querySelector('#h') // 创建观察者对象 var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation) }) }) // 配置观察选项: var config = { attributes: true, childList: true, characterData: true } // 传入目标节点和观察选项 observer.observe(target, config) // 随后,你还可以停止观察 // observer.disconnect() document.getElementById('h').onclick=function(){ // this.style.width="50px" this.innerHTML = "888888" } } </script> 原文链接:https://blog.csdn.net/weixin_42420703/article/details/983348131、使用obj.className来修改样式表的类名。
2、使用obj.style.cssTest来修改嵌入式的css。
3、使用obj.className来修改样式表的类名。
4、使用更改外联的css文件,从而改变元素的css
你其实要的是数据双向绑定功能,现在的数据监听兼容性都不是很好,你可以换种思路
注:不应该在div中直接使用td,td必须包含在标准的table格式中,不过先按你的来
js:
function notifyMe(){
}
functino refresh(){
//假如这个是你获取td中数据的方法
var data = "一堆td"//假设这个是你的td,而且你使用了jquery
var html = $(data)//利用jquery来将字符串转成对象
html.each(function(){//遍历新数据
var index = $(this).index()//第几个td
var oldText = $("#fresh td:eq("+index+")").text()//之前第index个td中的内容
var newText = $(this).text()//新td中的内容
if(oldText != newText){//如果老的和新的不一样
notifyMe(oldText, newText)//notifyYou 我顺便吧老的新的text都传给你了
//return false //如果你只想notify一遍,就把这个注释打开
}
})
//最后再把新的放到fresh的div里面
$("#fresh").html(data)
}
这样的话,在放到fresh之前就已经知道是否改变过了