8

javascript で参照されている要素がドキュメントに挿入されているかどうかを確認する方法を探しています。

次のコードでケースを説明しましょう。

var elem = document.createElement('div');

// Element has not been inserted in the document, i.e. not present

document.getElementByTagName('body')[0].appendChild(elem);

// Element can now be found in the DOM tree

Jquery には :visible セレクターがありますが、非表示の要素がドキュメントのどこかに配置されていることを確認する必要がある場合、正確な結果が得られません。

4

6 に答える 6

15

以下は、標準のNode.contains DOM APIを使用して要素が現在 DOM にあるかどうかを確認する簡単な方法です。

document.body.contains(MY_ElEMENT);

CROSS-BROWSER NOTE : IE のドキュメント オブジェクトにはメソッドがありません。contains()クロス ブラウザーの互換性を確保するには、document.body.contains()代わりに使用してください。（または、リンク、スクリプトなどの要素をチェックしている場合は document.head.contains ）

 

 

document特定の参照とノードレベルの使用に関する注意ownerDocument:

MY_ELEMENT.ownerDocument.contains(MY_ELEMENT)ドキュメント内のノードの存在をチェックするためにを使用するというアイデアを誰かが提起しました。これにより意図した結果が得られる可能性がありますが (ただし、99% のケースで必要以上に冗長になります)、ユースケースによっては予期しない結果が生じる可能性もあります。その理由について話しましょう。

document.implementation.createHTMLDocument()、<iframe>ドキュメント、または HTML インポート ドキュメントで生成されたドキュメントなど、別のドキュメントに現在存在するノードを処理している場合、ノードのownerDocumentプロパティを使用して、視覚的にレンダリングされたメインになると思わdocumentれるものの存在を確認します。あなたは傷の世界にいるでしょう。

ノード プロパティは、ノードが存在する現在のドキュメントownerDocumentへの単なるポインタです。 のほとんどすべてのユース ケースには、ノードの存在を特定するためのチェックが含まれます。チェックしたいドキュメントと同じであるという保証はありません - それはあなただけが知っています。危険なのは、誰かが他のドキュメントに存在するノードを参照、インポート、または生成する方法をいくつでも導入する可能性があることです。その場合、 の相対的な推論に依存するようにコードを記述した場合、コードが壊れる可能性があります。コードが常に期待どおりの結果を生成するようにするには、 のような相対的な推論を信頼するのではなく、チェックしようとしている具体的に参照されているものとのみ比較する必要があります。contains documentownerDocumentownerDocumentownerDocument documentownerDocument

于 2013-05-29T17:14:19.540 に答える
14

これを行う：

var elem = document.createElement('div');
elem.setAttribute('id', 'my_new_div');

if (document.getElementById('my_new_div')) { } //element exists in the document.
于 2010-04-27T05:57:20.613 に答える
1

最も安全な方法は、要素がドキュメントに含まれているかどうかを直接テストすることです。

function isInDocument(el) {
    var html = document.body.parentNode;
    while (el) {
        if (el === html) {
            return true;
        }
        el = el.parentNode;
    }
    return false;
}

var elem = document.createElement('div');
alert(isInDocument(elem));
document.body.appendChild(elem);
alert(isInDocument(elem));
于 2010-04-27T08:43:30.520 に答える
-1

compareDocumentPositionを使用して、要素が内に含まれているかどうかを確認しますdocument。PPKにはブラウザの互換性の詳細があり、JohnResigにはIEのバージョンがあります。

于 2010-04-27T09:56:03.620 に答える