Come ottenere tutti i selettori in base al nome della classe che sono stati aggiunti dinamicamente in JavaScript vanilla?

Question

Ho bisogno di ottenere/contare quanti elementi con un nome di classe comune target sono "disponibili". Nessuno su questi elementi esiste fisicamente nel DOM. Questi elementi sono stati aggiunti in seguito quando la pagina è stata caricata completamente.

seguito

var targets = document.getElementsByClassName('target); 

quando ho console.log(targets);ottengo[].

Quando clicco quelle parentesi quadre, si espandono e target elementi sembra apparire, ma accanto a loro c'è un messaggio:

Valore oggetto a sinistra era snapshotted quando connesso, valore al di sotto è stato valutata solo ora.

quindi immagino che ho fatto quando console.log DOM non è stato popolato con target elementi ancora. Come posso ottenere informazioni sugli elementi aggiunti dinamicamente?

EDIT:

Ho controllato le funzioni di HSH e

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. No jQuery per favore.

Answer 1

È possibile chiamare lo script check-in DOMContentLoaded evento:

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

Inoltre è possibile utilizzare DOMSubtreeModified caso se ci si aspetta che sarà aggiunto qualcosa durante il runtime.

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

JSFiddle

Answer 2

La sua domanda è molto confusa.

ho bisogno di ottenere/contare quanti selettori

A "selettore" è un modo di colpire/elementi di indirizzamento. Un selettore viene utilizzato per trovare o abbinare elementi. Ad esempio, .foo è un selettore , che corrisponde a elementi con la classe "foo". Nel tuo caso, intendi che vuoi ottenere/contare quanti elementi .

Ho bisogno di ottenere/contare quanti elementi con un nome di destinazione di classe comune sono "disponibili". Nessuno su questi elementi esiste fisicamente nel DOM.

Quindi gli elementi sono disponibili, ma non nel DOM? Cosa significa?

Questi elementi sono stati aggiunti in seguito quando la pagina è stata caricata completamente.

Cosa intendi con pieno carico? Lo stesso di DOMContentLoaded? O completamente caricato nel senso che tutto il JS per aiutare a costruire la pagina è stato completato?

La cosa più semplice da fare è attendere che tutta la logica che aggiunge elementi abbia finito di funzionare, quindi valutare getElementsByClassName. Perché non puoi farlo?

Se per qualche motivo si valuta getElementsByClassName prima, o al caricamento della pagina, vi accorgerete che in un dato momento si ancora riflette un elenco aggiornato degli elementi, dal momento che getElementsByClassName restituisce un vivo collezione, che viene aggiornata man mano che il documento cambia. Ciò significa anche che non è necessario eseguire nulla al momento del caricamento o guardare eventi arcani come DOMSubtreeModified.

In qualsiasi momento, anche dopo aver aggiunto gli elementi, il valore di targets includerà tutti gli elementi con quella classe e targets.length fornirà il numero totale di tali elementi.

Da MDN:

elements è un live HTMLCollection di elementi trovati .