要素がDom Nodeに追加されているかを確認する

要素がDomノードに追加されているかを調べる。

例えば、まだDomノードに追加されていない要素の高さや幅を取得しようとしても0が返ってくる。
これではまずいこともあるだろう。

ということで、こんな関数を書いてみる。

function isAddedToDom(elm){
    while (elm.parentNode && elm.parentNode.tagName) {
        elm = elm.parentNode;
    }
    return elm.tagName.toLowerCase() === "html";
}

tagNameまで見ている理由

1. fragmentでループから抜ける
2. Document(elm.ownerDocument)にまで到達しないようにする

親要素がfragmentであれば、まだその要素はDomに追加されていないということなので、その時点でループから抜ける。

また、このwhileループはほっとくと ownerDocumentにまで到達してしまう場合がある。
ownerDocumentはDomに追加されていない要素でも同様に取得できてしまう。
そこでtagNameを見ることによってownerDocumentまで到達しないようにする。

この関数をjQueryで使う

$.extend($.expr[':'],{
    addedToDom: function (elm){
        //tagNameを見る理由
        // - fragmentで抜ける
        // - Document(elm.ownerDocument)にまで到達しないようにする
        while (elm.parentNode && elm.parentNode.tagName) {
            elm = elm.parentNode;
        }
        return elm.tagName.toLowerCase() === "html";
    }
});

Usage

isを使う

function foo( elm ){
    if ($(elm).is(":addedToDom")) {
        //something...
    }
}

filterを使う

var elm = $("foo").filter(":addedToDom");