MutationObserver は Javascript 内の要素の存在をどのように効率的に処理できるでしょうか?

MutationObserver を使用した Javascript での要素の存在の待機

Web 開発では、多くの場合、要素が表示されるか消えるのを待つ必要があります。ページを操作する前に、ページにアクセスしてください。このシナリオは、自動テストや動的 Web アプリケーションで頻繁に発生します。

この問題に対処するには、いくつかの方法があります。 1 つの方法では、要素の存在を継続的にチェックする間隔を設定します。ただし、このアプローチは非効率的であり、パフォーマンスの問題が発生する可能性があります。

解決策: MutationObserver

より効果的な解決策は、MutationObserver API を利用することです。この API を使用すると、DOM の変更を監視し、それに応じて応答できます。 MutationObserver を使用して要素が表示されるのを待つ方法を示すコード スニペットを次に示します。

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

使用法:

この関数を使用するには、CSS セレクターを渡すだけです。待機したい要素の。 DOM に出現すると、その要素で解決される Promise を返します。

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

MutationObserver の利点:

• 非侵襲的: 他の Javascript と干渉しません
• 効率的: DOM が変更された場合にのみトリガーされます。
• 徹底: 要素自体とその要素内の変更を検出します。

結論:

MutationObserver を使用して要素の存在を待機することは、ポーリングの必要性を排除し、正確な要素の取得を保証する堅牢で効率的なソリューションです。これは、自動テスト、動的な Web 開発、および DOM の変更に対応する必要があるあらゆる状況に不可欠なツールです。

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