如果你想要一个通用的MutationObserver解决方案，你可以使用这个函数

// MIT Licensed
// Author: jwilson8767

/**
 * Waits for an element satisfying selector to exist, then resolves promise with the element.
 * Useful for resolving race conditions.
 *
 * @param selector
 * @returns {Promise}
 */
export function elementReady(selector) {
  return new Promise((resolve, reject) => {
    const el = document.querySelector(selector);
    if (el) {resolve(el);}
    new MutationObserver((mutationRecords, observer) => {
      // Query for elements matching the specified selector
      Array.from(document.querySelectorAll(selector)).forEach((element) => {
        resolve(element);
        //Once we have resolved we don't need the observer anymore.
        observer.disconnect();
      });
    })
      .observe(document.documentElement, {
        childList: true,
        subtree: true
      });
  });
}

来源:https://gist.github.com/jwilson8767/db379026efcbd932f64382db4b02853e 如何使用它的例子

elementReady('#someWidget').then((someWidget)=>{someWidget.remove();});

注意:MutationObserver有很好的浏览器支持;https://caniuse.com/#feat=mutationobserver

voila !：）

也许我有点晚了:)，但这里有一个很好的和简短的解决方案，由chrisjhoughton，它允许执行回调函数当等待结束。

https://gist.github.com/chrisjhoughton/7890303

var waitForEl = function(selector, callback) {
  if (jQuery(selector).length) {
    callback();
  } else {
    setTimeout(function() {
      waitForEl(selector, callback);
    }, 100);
  }
};

waitForEl(selector, function() {
  // work the magic
});

如果你需要将参数传递给回调函数，你可以这样使用它:

waitForEl("#" + elDomId, () => callbackFunction(param1, param2));

但是要小心!默认情况下，这个解决方案会陷入一个无限循环的陷阱。

在GitHub线程中还提供了对topicstarter建议的几个改进。

享受吧!

在requestAnimationFrame中中继比在setTimeout中更好。这是我在es6模块和使用承诺的解决方案。

Es6、模块和承诺:

// onElementReady.js
const onElementReady = $element => (
  new Promise((resolve) => {
    const waitForElement = () => {
      if ($element) {
        resolve($element);
      } else {
        window.requestAnimationFrame(waitForElement);
      }
    };
    waitForElement();
  })
);

export default onElementReady;

// in your app
import onElementReady from './onElementReady';

const $someElement = document.querySelector('.some-className');
onElementReady($someElement)
  .then(() => {
    // your element is ready
  }

纯js和承诺:

var onElementReady = function($element) {
  return new Promise((resolve) => {
    var waitForElement = function() {
      if ($element) {
        resolve($element);
      } else {
        window.requestAnimationFrame(waitForElement);
      }
    };
    waitForElement();
  })
};

var $someElement = document.querySelector('.some-className');
onElementReady($someElement)
  .then(() => {
    // your element is ready
  });

这是为那些在Chrome控制台上运行代码而不是硬编码到html的人准备的。

上面User993683提供的代码将在您的控制台代码中工作。他/她的代码如下:

while(!document.querySelector(".my-selector")) {
  await new Promise(r => setTimeout(r, 500));
}
// now the element is loaded

他/她补充说，它“需要在一个异步函数中。”如果你在Chrome的控制台中使用代码，那么实际上你不需要把它包装在一个函数中。它会像写的那样工作。您只需要将它放在代码中试图访问元素之前的位置，以确保它存在。

唯一需要注意的是，它不适用于在其他情况下偶尔出现的元素。否则，如果元素从未下载，它将无限循环，您将不得不关闭浏览器来停止等待。只对您确定会出现的元素使用它。

我的公司的表单页面为每个案例号都有十几个或更多的字段需要填写。我每天在脚本数组中有数百个案例编号。当改变iFrame SRC和“onload”不工作在Chrome控制台脚本时，元素不同时加载。所以这个方法对我来说是天赐之物，它每天为我节省了至少45分钟，而不是因为加载时间的波动而在这里等10秒或在那里等30秒。

我所做的唯一改变是“getElementById”而不是一般的“querySelector”，因为我需要的所有元素都有ID。

while(!document.getElementById("myFrame").contentWindow.document.getElementById('someDocID')) {
      await new Promise(r => setTimeout(r, 500));
    }
// After completing the wait above it is now safe to access the element
document.getElementById("myFrame").contentWindow.document.getElementById('someDocID'
).innerText = "Smith, John R";
// and now click the submit button then change the SRC to a fresh form, and use
//*emphasized text* the code again to wait for it to fully load

我向监控器道歉，但我添加了这个作为回答，因为在对控制台脚本进行了几个月的研究并等待元素加载之后，user993683关于函数的评论最终使我意识到控制台脚本不需要此代码的函数。我在这里的目标只是让其他consoler脚本用户不必像我一样经历同样的学习曲线。

根据您需要支持的浏览器，可以选择MutationObserver。

编辑:现在所有主流浏览器都支持MutationObserver。

以下内容应该可以达到目的:

// callback executed when canvas was found
function handleCanvas(canvas) { ... }

// set up the mutation observer
var observer = new MutationObserver(function (mutations, me) {
  // `mutations` is an array of mutations that occurred
  // `me` is the MutationObserver instance
  var canvas = document.getElementById('my-canvas');
  if (canvas) {
    handleCanvas(canvas);
    me.disconnect(); // stop observing
    return;
  }
});

// start observing
observer.observe(document, {
  childList: true,
  subtree: true
});

注意:我自己还没有测试过这段代码，但这是大概的想法。

您可以轻松地将其扩展为只搜索DOM中发生更改的部分。为此，使用突变参数，它是MutationRecord对象的数组。

这只适用于现代浏览器，但我发现它更容易使用一个then，所以请先测试，但是:

ES5

function rafAsync() {
    return new Promise(resolve => {
        requestAnimationFrame(resolve); //faster than set time out
    });
}

function checkElement(selector) {
    if (document.querySelector(selector) === null) {
        return rafAsync().then(() => checkElement(selector));
    } else {
        return Promise.resolve(true);
    }
}

ES6

async function checkElement(selector) {
    const querySelector = null;
    while (querySelector === null) {
        await rafAsync();
        querySelector = document.querySelector(selector);
    }
    return querySelector;
}  

使用

checkElement('body') //use whichever selector you want
.then((element) => {
     console.info(element);
     //Do whatever you want now the element is there
});