day206-初识MutationObserver

要点

  1. MutationObserver 使用方法
  2. MutationObserver 的方法observe()(具体)和takeRecords()以及disconnect()
  3. MutationRecord

使用方法

var mObserver = new MutationObserver(callback) // 新建实例

var word = document.querySelector('words');
var options = {
'childList': true,
'arrtibutes': true,
'characterData': true, // 节点内容或节点文本的变动
'subtree': true, // 所有子节点,不能单独观察,必须同时指定以上三个为`true`
'attributeOldValue': true,
'characterDataOldValue': true,
'attributesFilter': ['class', 'str'] // 值为数组,表示观察的特定属性
}
mObserver.observer(word, options)

disconnect、takeRecord

  • disconnect 表示停止观察,无参数,用法:mObserver.disconnect()
  • takeRecord 用来清除变动记录,无参数,用法:mObserver.takeRecords()

MutationRecord

每个 MutationRecord 代表一个独立的 DOM 变化,其作为参数传递给 MutationObserver 的回调函数。

  1. 参数的含义
  • type: 观察的变动类型(attribute、characterData或者childList)
  • target: 发生变动的DOM对象
  • addedNodes: 新增的DOM对象
  • removeNodes: 删除的DOM对象
  • previousSibling: 前一个同级的DOM对象,无则返回null
  • nextSibling: 下个同级的DOM对象,无则返回null
  • attributeName: 发生变动的属性,如果设置了attributeFilter,则只返回预先指定的属性
  • oldValue:变动前的值。只对attribute和characterData变动有效

详细的属性表,点击这里

参考

MDN-MutationObserver

MDN-MutationRecord

文章作者: lmislm
文章链接: http://lmislm.com/2019/08/07/2019-08-07/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog