js监听页面元素变化

JavaScript013

js监听页面元素变化,第1张

该接口用来观察节点变化,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/98334813

Object.extend = function (destination, source) {

for ( var property in source) {

destination[property] = source[property]

}

return destination

}

Prototype 对Object类进行的扩展主要通过一个静态函数Object.extend(destination, source)实现了JavaScript中的继承。 从语义的角度, Object.extend(destination, source)方法有些不和逻辑, 因为它事实上仅仅实现了从源对象到目标对象的全息拷贝。不过你也可以这样认为:由于目标对象拥有了所有源对象所拥有的特性, 所以看上去就像目标对象继承了源对象(并加以扩展)一样。另外, Prototype对Object扩展了几个比较有用的静态方法, 所有其他的类可以通过调用这些静态方法获取支持。

JScript code

Object.extend=function(destination, source) { // 一个静态方法表示继承, 目标对象将拥有源对象的所有属性和方法

for (var property in source) {

destination[property] = source[property] // 利用动态语言的特性, 通过赋值动态添加属性与方法

}

return destination // 返回扩展后的对象

}

Object.extend(Object, {

inspect: function(object) { // 一个静态方法, 传入一个对象, 返回对象的字符串表示

try {

if (object == undefined) return'undefined'// 处理undefined情况

if (object ==null) return'null'// 处理null情况

// 如果对象定义了inspect方法, 则调用该方法返回, 否则返回对象的toString()值

return object.inspect ? object.inspect() : object.toString()

} catch (e) {

if (e instanceof RangeError) return'...'// 处理异常情况

throw e

}

},

keys: function(object) { // 一个静态方法, 传入一个对象, 返回该对象中所有的属性, 构成数组返回

var keys = []

for (var property in object)

keys.push(property)// 将每个属性压入到一个数组中

return keys

},

values: function(object) { // 一个静态方法, 传入一个对象, 返回该对象中所有属性所对应的值, 构成数组返回

var values = []

for (var property in object) values.push(object[property])// 将每个属性的值压入到一个数组中

return values

},

clone: function(object) {// 一个静态方法, 传入一个对象, 克隆一个新对象并返回

returnObject.extend({}, object)

}

})