È possibile rendere querySelectorAll live come getElementsByTagName?

Question

getElementsByTagName() ha 2 grandi caratteristiche: è veloce ed è in diretta. Ma cosa succede se voglio ottenere p strong. Ovviamente potrei perfezionare una selezione usando getElementsByTagName() ma non perderei l'effetto live per i nuovi tag p?

C'è un modo per trasformare querySelectorAll in un selettore live?

Oppure ... c'è un modo per utilizzare getElementsByTagName() e getElementsByClassName() per creare una funzione che funziona in modo simile (almeno con i discendenti) come querySelectorAll ma essendo vivere?

Answer 1

considerare l'utilizzo di osservatori mutazione. Guarda per childList con subtree: true. Quando arriva la notifica, puoi esaminare ogni nodo aggiunto con matches per vedere se corrisponde a qualche selettore.

function querySelectorAllLive(element, selector) { 

    // Initialize results with current nodes. 
    var result = Array.prototype.slice.call(element.querySelectorAll(selector)); 

    // Create observer instance. 
    var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     [].forEach.call(mutation.addedNodes, function(node) { 
     if (node.nodeType === Node.ELEMENT_NODE && node.matches(selector)) { 
      result.push(node); 
     } 
     }); 
    }); 
    }); 

    // Set up observer. 
    observer.observe(element, { childList: true, subtree: true }); 

    return result; 
} 

Answer 2

Non penso sia possibile perché le successive modifiche del DOM non si riflettono nell'oggetto NodeList restituito dal metodo querySelectorAll().

Selectors-api W3C

Answer 3

Se avete qualche preoccupazione a tutti i circa le prestazioni del tuo sito web (come qualsiasi persona sana di mente), allora per favore ti sto sollecitando soluzione non di angellica.araujo. È incredibilmente lento e poco pratico per qualsiasi sito web in qualsiasi circostanza. Utilizzare invece la libreria querySelectorLive di Fremy Company found here at github. Esempio di utilizzo:

myQuerySelectorLive("ul.active,li:hover",{ 
    onadded: function(e) { 
     console.log("ul/li added:"); 
     console.log(e.textContent); 
    }, 
    onremoved: function(e) { 
     console.log("ul/li removed:"); 
     console.log(e.textContent); 
    } 
}); 

La ragione per cui è così male da usare la soluzione di angellica.araujo è perché la sua soluzione può essere breve & semplice, tuttavia mette alla prova ogni selettore su ogni elemento quando succede qualcosa. Questo non è buono. D'altra parte, la libreria querySelectorLive di Fremy Company è così grande perché sa selettivamente quali cose mettere alla prova quando. Ad esempio, se stai interrogando una classe all'interno di una classe (ad esempio .foo>.bar), controllerà il selettore solo se l'attributo di classe cambia.