バニラJavaScriptに動的に追加されたすべてのセレクタをクラス名で取得するにはどうすればよいですか？

Question

共通のクラスtargetの名前の要素が「使用可能」であるかどうかを調べる必要があります。これらの要素のどれも物理的にDOMに存在しません。これらの項目は、ページが完全にロードされた後に追加されました。

var targets = document.getElementsByClassName('target); 

以下

I console.log(targets);は私が[]を取得します。私はそれらの角括弧をクリックすると

は、彼らが拡大し、 target項目が表示されているようだが、彼らに次のメッセージがあります：ログインしたときに左の

オブジェクトの値がスナップショットを作成して、ちょうど今 を評価した値を下回ります。

だから私は、DOMはまだtarget要素が取り込まれていないときに私はconsole.logをしたことを想定しています。どのように動的に追加された要素に関する情報を取得するのですか？

EDIT：

私はHSHの機能をチェックし

document.body.addEventListener('DOMSubtreeModified', function(event) { 
    var targets = document.getElementsByClassName('target'); 
    console.log(targets.length); 
    /** 
    * If I have 40 target elements, this will be called 40 times :/ showing first bunch of zeros then finally number will reach to 40 
    */ 
}); 

/** 
* So this would be ideally (called only once) but this always shows empty array and 0 
*/ 
document.addEventListener('DOMContentLoaded', function(event) { 
    var targets = document.getElementsByClassName('marker'); 
    console.log(targets); // always shows [] 
    console.log(targets.length); // always shows 0 

    //while I can play with those target selectors in Chrome Dev Tools 
}); 

PS。いいえjQueryしてください。

Answer 1

あなたはDOMContentLoadedイベントであなたのチェックスクリプトを呼び出すことができます：あなたは何かが、実行時に追加されることを期待している場合

document.addEventListener('DOMContentLoaded', function(event) { 
    var targets = document.getElementsByClassName('target'); 
    console.log(targets); 
}); 

また、あなたはDOMSubtreeModifiedイベントを使用することができます。

document.body.addEventListener('DOMSubtreeModified', function(event) { 
    var targets = document.getElementsByClassName('target'); 
    console.log(targets); 
}); 

JSFiddle

Answer 2

あなたの質問は非常に紛らわしいです。

私が取得/「セレクタ」は、要素に対処/標的とする方法であるどのように多くのセレクタ

カウントする必要があります。セレクタは、要素を検索または一致させるために使用されます。例えば、.fooは、セレクタであり、の要素とクラス"foo"と一致します。あなたの場合は、の要素数を取得/カウントしたいということです。

一般的なクラスのターゲット名を持つ要素の数を取得/カウントする必要があります。これらの要素のどれも物理的にDOMに存在しません。

要素は使用できますが、DOMでは使用できません。どういう意味ですか？

これらの項目は、ページが完全にロードされた後に追加されています。

完全にロードされたとはどういう意味ですか？ DOMContentLoadedと同じですか？または、すべてのJSがページを構築するのに役立つという意味で完全にロードされている？

最も簡単なことは、要素を追加するすべてのロジックが終了してから、getElementsByClassNameを評価するまで待つことです。どうしてそんなことはできないの？ getElementsByClassNameがライブを返しますので、

以前getElementsByClassNameを評価するいくつかの理由で、またはページのロードの場合は、任意の時点でそれを見つけることがまだは、要素の最新のリストを反映していますコレクションは、ドキュメントが変更されると更新されます。つまり、ロード時に何かを実行する必要はなく、DOMSubtreeModifiedなどの不可解なイベントを監視する必要もありません。

要素が追加された後も含めて、targetsの値にはそのクラスのすべての要素が含まれ、targets.lengthにはそのような要素の合計数が表示されます。 MDNから

：

elementsが見つかった要素のライブ HTMLCollectionです。