DOM元素观察者
#javascript #dom #observer #mutationobserver

在开发Web应用程序时，有时需要观看对DOM元素进行的更改，例如添加或删除组件更改或新的子元素的属性。

我们如何观察JavaScript中的DOM元素？

mutationObserver 是该类，它将在此帮助在DOM元素上添加一个观察者。该观察者也可以观察到属性或儿童元素的更改。此MutationObserver API在运行回调时使用Microtask队列，与Promise相似，与Promise类似。简单地说，Promise / MutationObserver比使用任务队列的Settimeout / setIntervals更优先。< / p>

让我们看看如何逐步创建这个观察者。

首先，为您要观察到的属性或子节点创建一个配置，也可以同时观察。

    const mutationConfig = { attributes: true, childList: true };

第二，创建一个回调函数，该函数在修改属性或儿童列表时将调用。

function onMutationChangeCallack(mutationConfigList) {
    for(const mutationConfig of mutationConfigList) {
        if(mutationConfig.type === 'attributes') {
            addLogs(`${mutationConfig.attributeName} attribute changed`);
        } else if(mutationConfig.type === 'childList') {
        addLogs(`childList updated. new dom element added`);
        }
    }
}

在这里可以观察到诸如样式或自定义属性之类的内置属性。
第三，创建一个突变操作机类的对象，然后将onmmotchangeCallback传递给构造函数。

   const observer = new MutationObserver(onMutationChangeCallack);

然后观察是开始观察DOM元素上更改的方法。需要通过两个强制性参数来观察方法。一个是我们需要观看的目标dom元素和上面创建的配置对象。

   let target = document.getElementById('playarea');
   observer.observe(target, mutationConfig);

还有其他方法，例如Disconnect，该方法停止观察功能，并且在此之后不会调用回调。

For more information

请检查突变观察者API的LIVE LIVE的链接

Live Example

Mutation Observer Example