要素が存在するまで待つにはどうすればいいですか? 質問する

ここでは、ミューテーションオブザーバーAPI。

1. いいえjQuery
2. いいえTimer
3. サードパーティのライブラリなし
4. 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)) {
                observer.disconnect();
                resolve(document.querySelector(selector));
            }
        });

        // If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336
        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');