存在していないDOM要素を検知する方法
EventListenerのAPIやMutationObserverについて調べても、
存在しないDOMについての監視する方法がなかったので、自分で書いてみました。
動的にDOMを生成するときに、便利でしょう。
実際、動的にDOMを生成する必要のあるケースがあって、そのDOMの生成の完了を監視する必要がありましたので。
以下にjsfiddleのURLを記載します。
ここでは、特定クラスを監視するコードとなります。
正確には、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);