Question

我有一个项目列表，并且我正在使用Mutation Observer检查是否从该列表中添加或删除了项目。代码如下：

 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””。

我深表歉意，因为我知道在控制台中看不到更改非常困难，而且调试起来也很困难。本质上，有没有办法可以检查正在更改的特定属性？例如。当删除该项目并将'hidden'类添加到元素时，我可以检查特定的属性更改而不是所有属性更改吗？

希望这足以解释某人将我指向正确的方向了吗？

Answer 1

如果在第二个参数attributes中将false选项设置为.observe()，则不会通知您属性值的更改。

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

1 个答案: