JavaScript で要素が存在するのを効率的に待つにはどうすればよいですか?

要素の存在を待機しています

Web 開発では、要素が表示されたり消えたりする Web ページが動的に更新されることがよくあります。したがって、特定の要素がいつ利用可能になるかを判断することが不可欠になります。この記事では、要素が存在するまで待機するための MutationObserver API を使用した堅牢なソリューションを検討します。

MutationObserver: ネイティブ ソリューション

MutationObserver API は、 DOM の変更を監視する多用途の手段。これにより、特定の要素またはドキュメント全体を監視し、基準に一致する変更があるたびに通知するオブザーバーを作成できます。

ソリューションの実装

以下コード スニペットは waitForElm の実装を示していますfunction:

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));
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

使用法

waitForElm 関数を利用するには、目的の要素のセレクターを渡すだけです。 Promise が返され、要素が利用可能になったときに解決されます。

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});

利点

このソリューションには、従来のポーリング メソッドや jQuery の組み込みメソッドに比べていくつかの利点があります。 :

• 効率的:不必要なポーリングがなく、システム リソースが節約されます。
• 正確: 要素が実際に存在するときにトリガーされることが保証されます。
• ネイティブ: サードパーティ ライブラリなしまたは重い依存関係。
• をサポートasync/await: 最新の非同期プログラミングとのシームレスな統合。

MutationObserver API を活用すると、Web アプリケーションに要素が存在するのを効果的に待機でき、信頼性が高くタイムリーなアクションが保証されます。

以上がJavaScript で要素が存在するのを効率的に待つにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。