JavaScript MutationObserver实例讲解

下面是关于“JavaScript MutationObserver实例讲解”的详细攻略。

什么是MutationObserver

MutationObserver是在现代浏览器中新增的监视DOM元素变化的API。它提供了一种能够在DOM对象发生变化时，异步被通知的能力。

如何使用MutationObserver

MutationObserver是一个构造函数，可以使用new来实例化。在实例化时，传入一个回调函数作为参数，这个回调函数会在DOM发生变化时被调用。

// 需要观察变化的目标元素
const target = document.querySelector('#target')

// 创建MutationObserver实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach((mutation) => {
    console.log(mutation.type)
  })
});

// 配置观察选项
const config = {
  attributes: true,
  childList: true,
  subtree: true
};

// 将目标节点与观察选项链接
observer.observe(target, config);

MutationObserver的配置

MutationObserver的observe方法可以接收两个参数：要监视的节点以及一个配置对象。配置对象的属性可以包括：

• attributes：是否监视元素attribute的变动，默认是false
• childList：是否监视子节点的变动，默认是false
• subtree：是否监视后代节点的变动，默认是false。
• characterData：是否监视Text节点值的变动，默认是false。

MutationRecord的生成

在DOM变化时，MutationObserver回调函数会收到一个参数，这个参数被称为MutationRecord。MutationRecord记录了哪一个DOM对象发生了什么样的变化。MutationRecord包含的属性有：

• type: 返回节点被修改的类型。
• target：返回被修改的节点。
• addedNodes：返回新增的节点集合。
• removedNodes：返回被移除的节点集合。

下面是一个示例代码，用来观察子节点的变化：

// 需要观察变化的目标元素
const target = document.querySelector('#target')

// 创建MutationObserver实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach((mutation) => {
    console.log(mutation.type)
    console.log(mutation.target)
    console.log(mutation.addedNodes)
    console.log(mutation.removedNodes)
  })
});

// 配置观察选项
const config = {
  childList: true
};

// 将目标节点与观察选项链接
observer.observe(target, config);

// 修改目标节点的子节点
target.innerHTML = '<p>Hello World!</p>'

MutationObserver的实际应用

1. 观察节点属性变动

下面是一个用来观察节点属性变动的示例：

// 需要观察变化的目标元素
const target = document.querySelector('#target')

// 创建MutationObserver实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach((mutation) => {
    console.log(mutation.type)
    console.log(mutation.target)
  })
});

// 配置观察选项
const config = {
  attributes: true
};

// 将目标节点与观察选项链接
observer.observe(target, config);

// 修改目标节点的属性
target.setAttribute('data-attr', 'test')

1. 观察节点子元素变动

下面是用来观察节点子元素变动的示例：

// 需要观察变化的目标元素
const target = document.querySelector('#target')

// 创建MutationObserver实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach((mutation) => {
    console.log(mutation.type)
    console.log(mutation.addedNodes)
  })
});

// 配置观察选项
const config = {
  childList: true
};

// 将目标节点与观察选项链接
observer.observe(target, config);

// 修改目标节点的子节点
target.innerHTML = '<p>Hello World!</p>'

以上就是关于“JavaScript MutationObserver实例讲解”的详细攻略。