MutationObserver.observe：参数 1 不是对象答案

【问题标题】：MutationObserver.observe: Argument 1 is not an objectMutationObserver.observe：参数 1 不是对象
【发布时间】：2022-02-11 19:41:13
【问题描述】：

我想在跨度属性 (data-value) 的值更改时显示控制台消息。跨度没有 ID，所以我迭代每个类。但是当我尝试运行时，它总是显示错误。这是 HTML：

<span class="wpsl-selected-item" data-value="50"></span>

这里是 JS：

var target = document.querySelectorAll('.wpsl-selected-item');
for (var i = 0; i < target.length; i++) {
    create(target[i]);
}

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
    console.log('heya')
    });
});

  
var config = {
    attributes: true,
    attributeFilter: ['data-value']
};

observer.observe(target[i], config);

错误信息是：Uncaught TypeError: MutationObserver.observe: Argument 1 is not an object. 我正在使用 firefox

任何帮助将不胜感激，谢谢！

【问题讨论】：

.observe(target[i], config) - 唯一可用的i 是for (var i = ...) 中的那个。期望它在该循环之外也能正确工作并不是一个好主意 - 正如您在此处看到的那样。
不清楚“create()”函数在做什么，但是变量“i”在你的 for 循环之外没有任何意义。所以“target[i]”这不是你所期望的。尝试从那个开始:)
@Plastic “但是变量“i”在你的 for 循环之外没有任何意义” - 这是不正确的。它仍然可用（提升、范围）并且具有价值。但是，当用作索引时，该值将超出target 的范围。而undefined 不是对象...
@Andreas，你说得对，我指的是“i”值会与他的预期不同
@Plastic @Andreas 我认为“create()”可以为每个迭代创建一个对象target

标签： javascript html wordpress

【解决方案1】：

这对你有用吗？

var target = document.querySelectorAll('.wpsl-selected-item');
if (target.length > 0) {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            console.log('heya')
        });
    });
  
    var config = {
        attributes: true,
        attributeFilter: ['data-value']
    };

    for(var i = 0; i < target.length; i++) {
        observer.observe(target[i], config);
    }
}

【讨论】：

create() 电话在哪里？
@andys 没用，不知道为什么，类的迭代是对象吗？
@rickyslash 我正在 jsfiddle 中尝试它并且它有效。 https://jsfiddle.net/nawvye53