javascript - 如何等待直到元素存在？

Question

我正在使用Chrome中的扩展程序，但我想知道:找出元素何时存在的最佳方法是什么？使用纯JavaScript，间隔检查直到元素存在，或者jQuery是否有一些简单的方法来执行此操作？

Answer 1

由于性能问题，不建议使用DOMNodeInserted和其他DOM突变事件-推荐的方法是使用MutationObserver监视DOM。不过，只有新的浏览器才支持此功能，因此，当DOMNodeInserted不可用时，您应该使用MutationObserver。

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()