qsa-observer
Social Media Photo by Kevin Maillefer on Unsplash
Given an array of selectors, handles any matching element that was either connected, or disconnected, from an observed element, or document.
Differently from MutationObserver
- each element is granted to be handled, whenever it's observed via one, or more, selectors
- all observed elements will pass through
handle(element, connected, selector)utility, per each matching selector - elements injected through
innerHTML, or created offline, will be handled too once live
Example
import QSAO from 'qsa-observer';
// an Array of CSS selectors to observe
const query = ['div'];
// where to observe mutations, document by default
const root = document;
const {
drop, // an utility to drop a list of elements from being considered live
flush, // an utility to flush synchronously all queued mutations
observer, // the MutationObserver created by QSAO(...)
parse // an utility to parse new elements
// (i.e. after adding a selector to the query list)
} = QSAO({
query, // list of selectors to observe
root, // optional, as it's document by default
// the method that receives all elements that match one or more
// selectors in the query, and are either connected or disconnected
handle(element, connected, selector) {
const event = connected ? 'connected' : 'disconnected';
console.log(element, event, selector);
}
});
// example: add another selector to observe and pass through the handle
const observeMore = selector => {
if (!query.includes(selector)) {
query.push(selector);
parse(root.querySelectorAll(selector));
}
};
// example: watch 'p' nodes too after a second
setTimeout(observeMore, 1000, 'p');