Observe selectors in DOM.
Observes selector in container, invokes handler any time matching elements appear.
Handler can return a teardown function, called for unmatched elements.
Returns live collection of elements.
import spect from 'spect';
// assign aspect
const foos = spect('.foo', el => {
console.log('connected');
return () => console.log('disconnected');
});
// modify DOM
const foo = document.createElement('div');
foo.className = 'foo';
document.body.append(foo);
// ... "connected"
foo.remove();
// ... "disconnected"Listens for connected/disconnected events for the list of elements. (alternative to fast-on-load)
const nodes = [...document.querySelectorAll('.foo'), document.createElement('div')];
// assign listener
spect(nodes, el => {
console.log("connected");
return () => console.log("disconnected");
});
document.body.appendChild(nodes.at(-1))
// ... "connected"
nodes.at(-1).remove()
// ... "disconnected"Spect creates live collection of elements matching the selector. Collection extends Array and implements Set / HTMLColection interfaces.
const foos = spect(`.foo`);
// live collection
foos[idx], foos.at(idx) // Array
foos.has(el), foos.add(el), foos.delete(el) // Set
foos.item(idx), foos.namedItem(elementId) // HTMLCollection
foos.dispose() // destroy selector observer / unsubscribeIt combines selector parts indexing from selector-observer for simple queries and animation events from insertionQuery for complex selectors.
Simple selector is id/name/class/tag followed by classes or attrs.
-
#a,.x.y,[name="e"].x,*,a-b-c:x- simple selectors. -
a b,#b .c- complex selectors.
element-behaviors, insertionQuery, selector-observer, qso, qsa-observer, element-observer, livequery, selector-listener, mutation-summary, fast-on-load, selector-set, rkusa/selector-observer. css-chain
![dependabot[bot]](https://avatars.githubusercontent.com/u/49699333?size=120)
