如何等到元素存在？

javascript jquery google-chrome google-chrome-extension

2022-08-29 23:39:31

我正在Chrome中开发扩展程序，我想知道：找出元素何时存在的最佳方法是什么？使用普通的javascript，有一个间隔来检查直到元素存在，或者jQuery有一些简单的方法来做到这一点？

答案 1

这是一个使用MututingObserver api的简单解决方案。

不jQuery
不Timer
无第三方库
Promise基于并配合良好async/await

我已经在几个项目中使用它。

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

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

要使用它：

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});

或者使用异步/等待：

const elm = await waitForElm('.some-class');

答案 2

DOMNodeInserted由于性能问题，与其他 DOM 突变事件一起被弃用 - 推荐的方法是使用 MutationObserver 来监视 DOM。但是，它仅在较新的浏览器中受支持，因此您应该在不可用时回退。DOMNodeInsertedMutationObserver

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (!mutation.addedNodes) return

    for (let i = 0; i < mutation.addedNodes.length; i++) {
      // do things to your newly added nodes here
      let node = mutation.addedNodes[i]
    }
  })
})

observer.observe(document.body, {
    childList: true
  , subtree: true
  , attributes: false
  , characterData: false
})

// stop watching using:
observer.disconnect()