ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript で要素の存在を効率的に待つにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-12-10 00:23:14
オリジナル
586 人が閲覧しました

How Can I Efficiently Await Element Existence in JavaScript?

MutationObserver で要素の存在を待つ

Chrome 拡張機能の開発で遭遇したように、要素がいつ利用可能になるかを知ることが重要です。ページ。間隔を置いて外観をチェックするのは一般的な方法ですが、非効率的な場合があります。幸いなことに、jQuery は単純な解決策を提供しません。

現代的で効果的な代替手段は、MutationObserver API を利用することです。これにより、DOM ツリー内の変更をリッスンする JavaScript 関数を作成できます。

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
        });
    });
}
ログイン後にコピー

この関数は入力としてセレクターを受け取り、要素が見つかったときに解決される Promise を返します。

これを使用するには、次のように記述できます:

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});
ログイン後にコピー

または、非同期/待機:

const elm = await waitForElm('.some-class');
ログイン後にコピー

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート