javascript - 我如何监控特定 ID 何时出现在带有 javascript 突变的屏幕上？

Question

我使用的网站有点像幻灯片，但几秒钟后不显示“下一个”链接。我想做一个脚本，在该链接出现时立即点击该链接。

我研究并发现了“突变”，但是我对 javascript 没有什么经验。这是我到目前为止得到的。我想点击的链接在 chrome 中显示为:

a href="#" class="btn btn-step-active" id="btn-next-step">Next

代码:

function clickButton() {
    document.getElementById('btn-next-step').click();
}

const app = document.querySelector('#btn-next-step');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes) {
      const nextStepAdded = [...mutation.addedNodes].some((node) => node.className === 'btn btn-step active');
      if (nextStepAdded) {
        clickButton();
      }
    }
  });
});

observer.observe(app, { childList: true, subtree: true });

但是这似乎不起作用，我收到错误消息“无法在 mutationobserver 上执行观察:参数 1 不是节点类型”。有什么想法吗？

编辑:错误似乎是因为链接不存在而引起的...这就是我正在尝试做的全部目的。但我放置了一个父 ID，该 ID 在页面加载时实际存在，现在它起作用了!

Answer 1

observer.observe 的第一个参数需要是一个节点，它是您要查找的节点的祖先节点，而不是节点本身。

类似于:

observer.observe(document.body, ....)