Javascript 仅使用MutationObserver观察特定属性的属性更改

我有一个项目列表，我正在使用“突变观察者”检查是否从该列表中添加或删除项目。代码如下所示：

 function TrackListChange(elementId) {
                const targetNode = document.getElementById(elementId);
                const config = { attributes: true, childList: true, subtree: true };
                const callback = function (mutationsList, observer) {

                    for (let mutation of mutationsList) {
                        if (mutation.type === 'childList') {
                            alert("added to list"); 
                        }
                        if (mutation.type === 'attributes') {
                            alert("removed from list"); 
                        }
                    }
                };
                const observer = new MutationObserver(callback);
                observer.observe(targetNode, config);

            }

我遇到的问题是，当我从列表中删除一个项时，两个类属性都会更改，并且它会跟踪这两个属性。我只希望在从列表中删除某个项目时调用一次警报。为了更好地解释，下面是代码：

<div class="divclass active">
 <ul class="items-list" id="user-items">
  <li id="newitem1"></li> 
  <li id="newitem2"></li>
 </ul>
</div>

当我添加一个项目时，会添加一个新的

项目，就这么简单，没有其他更改。这个很好用。但是，当我删除一个项目并尝试检查正在发生的事情时，

元素正在改变，但元素也在改变。由于项目的编码方式，

元素将一个类添加到已删除的项中，并显示“class=”hidden“

我很抱歉，因为我知道在控制台中看不到更改是非常困难的，而且我也很难调试。本质上，有没有一种方法可以检查正在更改的特定属性？例如，当项目被移除并且“隐藏”类被添加到元素中时，我是否可以检查该特定属性的更改而不是所有更改

---

希望有人能给我解释清楚，给我指出正确的方向

如果将第二个参数中的

属性

选项设置为

假

。观察（），它不会通知您属性值的更改。

唯一的过滤功能是接受属性名称列表。无法按属性值指定筛选器，因此代码应该在回调中显式执行此操作。