如何等待元素的存在？

Question

如何等待元素的存在？

我正在研究Chrome的一个扩展，我想知道：什么是了解元素何时出现的最佳方法？使用普通的javascript，间隔可以检查元素的存在，或者jQuery有一些简单的方法可以做到这一点？

Answer 1

DOMNodeInserted由于性能问题，与其他DOM突变事件一起被弃用-推荐的方法是使用突变观察员去看多姆。不过，只有在较新的浏览器中才支持它，所以您应该回到DOMNodeInserted什么时候MutationObserver没有时间。var&nbsp;observer&nbsp;=&nbsp;new&nbsp;MutationObserver(function(mutations)&nbsp;{ &nbsp;&nbsp;mutations.forEach(function(mutation)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!mutation.addedNodes)&nbsp;return &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;mutation.addedNodes.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;do&nbsp;things&nbsp;to&nbsp;your&nbsp;newly&nbsp;added&nbsp;nodes&nbsp;here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;node&nbsp;=&nbsp;mutation.addedNodes[i] &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;})})observer.observe(document.body,&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;childList:&nbsp;true &nbsp;&nbsp;,&nbsp;subtree:&nbsp;true &nbsp;&nbsp;,&nbsp;attributes:&nbsp;false &nbsp;&nbsp;,&nbsp;characterData:&nbsp;false})//&nbsp;stop&nbsp;watching&nbsp;using:observer.disconnect()

Answer 2

下面是一个等待元素显示的核心JavaScript函数。参数：selector该函数查找元素${selector}time此函数每隔${time}毫秒检查该元素是否存在。function&nbsp;waitForElementToDisplay(selector,&nbsp;time)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(document.querySelector(selector)!=null)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("The&nbsp;element&nbsp;is&nbsp;displayed,&nbsp;you&nbsp;can&nbsp;put&nbsp;your&nbsp;code&nbsp;instead&nbsp;of&nbsp;this&nbsp;alert.") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;waitForElementToDisplay(selector,&nbsp;time); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;time); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}作为一个例子，设置selector="#div1"和time=5000将查找其id="div1"每5000毫秒。