【问题标题】:Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'无法在“MutationObserver”上执行“观察”:参数 1 不是“节点”类型
【发布时间】:2020-05-23 01:43:43
【问题描述】:

我正在创建一个脚本来为某些元素添加属性。我希望它适用于 动态添加的元素。我想使用 Mutation Observe,但我收到了这个错误: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

我使用的代码:

const langAdding = (tag) => {
    tag.setAttribute('lang', 'en-us');
}

const target = document

const callback = (mutations, observer) => {
    mutations.forEach(mutation => {
        switch (mutation.type) {
            case 'childList':
                for (const el of mutation.addedNodes) {
                    if (!el.hasAttribute("lang")) {
                        el = langAdding(el) 
                    } else if (el.firstElementChild) {
                        for (const child of el.getElementsByTagName('p')) {
                            child = langAdding(child);
                    }
                }
                break;
        }
    })
}

const observer = new MutationObserver(callback);

observer.observe(target, {
    childList: true,
    attributes: true,
    characterData: true,
    subtree: true
});

而且我真的不知道我是否做对了所有事情。如果您发现错误,请帮助我

【问题讨论】:

  • 你一定是缺少 标签?
  • 使用 document 代替 document.querySelector('body')。还要注意您的观察者会创建一个无限循环的自我造成的突变,以防止您需要首先检查属性是否已经存在或在进行更改之前断开观察者的连接。 addedNodes 上也没有 forEach 方法。
  • @wOxxOm 我已经更新了代码。实际上,我没有控制台错误,但脚本不起作用。而且我不太明白你的意思:addedNodes 上也没有 forEach 方法。我将我的函数用于mutation.addedNodes - 它们是新添加的元素,不是吗?
  • 代码现在看起来不错,但它没有考虑到 addedNodes 不是“扁平”的事实 - 此集合中的每个节点可能是一个包含数千个节点的容器,因此您将需要列举那些,例如:one, two.
  • @wOxxOm 我已经更新了代码,现在可以了吗?我使用按钮在我的页面上添加段落,但脚本仍然不起作用。

标签: javascript dom mutation-observers


【解决方案1】:

问题中的代码工作正常,我只需要删除代码中的最后一行(observer.disconnect()),非常感谢@wOxxOm 的帮助,他帮助返工了回调。

【讨论】:

    猜你喜欢
    • 2021-05-06
    • 2017-03-16
    • 1970-01-01
    • 2020-09-25
    • 1970-01-01
    • 2015-01-20
    • 2023-04-01
    • 2021-02-19
    • 2018-01-26
    相关资源
    最近更新 更多