JavaScript MutationObserver: дождаться элемента DOM

MutationObserver сообщает об изменениях дерева DOM и помогает подключить поведение к элементам, созданным позже. Наблюдение следует ограничивать нужным контейнером и отключать после выполнения задачи.

Рабочий пример

function onElement(root, selector, callback) {
  const found = root.querySelector(selector);
  if (found) return callback(found);
  const observer = new MutationObserver(() => {
    const element = root.querySelector(selector);
    if (element) {
      observer.disconnect();
      callback(element);
    }
  });
  observer.observe(root, { childList: true, subtree: true });
  return () => observer.disconnect();
}

Сначала выполняется обычный поиск, чтобы не пропустить элемент, уже находящийся в DOM. Observer отключается после первого совпадения.

Частый вопрос

Можно ли использовать MutationObserver вместо таймера?

Для изменений DOM — да, это точнее polling. Для состояния, не отражённого в DOM, выберите соответствующий API или событие.