TeraBytesMemo

プログラミング関連で自分のメモをまとめて書いたり気が向いたら書いたり

存在していないDOM要素を検知する方法

EventListenerのAPIやMutationObserverについて調べても、

存在しないDOMについての監視する方法がなかったので、自分で書いてみました。

動的にDOMを生成するときに、便利でしょう。

実際、動的にDOMを生成する必要のあるケースがあって、そのDOMの生成の完了を監視する必要がありましたので。

以下にjsfiddleのURLを記載します。

Edit fiddle - JSFiddle

ここでは、特定クラスを監視するコードとなります。

正確には、fooの生成を監視するコードとなっていますが、存在していないfooクラスにも対応できています。

もし、fooクラスが生成が1つで十分でしたら、

fooクラス発見時に、MutationObserverを停止したりすればよいです。

実際のコード

一応実際のコードも貼り付けておきます。

var observeTo = "foo";

var documentObserver = function() {
    var option = { childList: true, subtree: true };

    var observer = new MutationObserver(findClassListener);
    observer.observe(document.body, option);

    return observer;
};

var findClassListener = function(mutation) {

    mutation.forEach(function(m) {
        var nodes = m.addedNodes;
        for(i=0; i<nodes.length; i++) {
            if (nodes[i].classList.contains("foo")) {
                console.log("A " + observeTo + " class DOM is generated !");
            }
        }
    });
};

documentObserver();
var rendered = document.createElement("div");
rendered.className += ' ' + "foo";
document.body.appendChild(rendered);