使用 MutationObserver 仅观察特定属性的属性变化

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

我很抱歉，因为我知道在控制台中看不到变化是相当困难的，而且对我来说调试也很困难。本质上，有没有办法可以检查正在更改的特定属性？例如。当删除该项目并将“隐藏”类添加到元素时，我可以检查该特定属性更改而不是所有属性更改吗？

希望这足以让有人为我指明正确的方向？

Answer 1

如果您将第二个参数中的

attributes

选项设置为

false

为

.observe()

，则不会通知您属性值的更改。

Answer 2

您可以这样做，属性默认值为 false，因此添加属性 attributeFilter 将适合您：

const pageObserver = new MutationObserver(callback);
  pageObserver.observe(targetNode, {
    subtree: true,
    childList: true,
    attributeFilter: ['aria-selected'],
  });