- Notifications
You must be signed in to change notification settings - Fork8
Observable selectors in DOM
License
dy/spect
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Observe selectors in DOM.
Observesselector incontainer, invokeshandler any time matching elements appear.
Handler can return a teardown function, called for unmatched elements.
Returns live collection of elements.
importspectfrom'spect';// assign aspectconstfoos=spect('.foo',el=>{console.log('connected');return()=>console.log('disconnected');});// modify DOMconstfoo=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 tofast-on-load)
constnodes=[...document.querySelectorAll('.foo'),document.createElement('div')];// assign listenerspect(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.
constfoos=spect(`.foo`);// live collectionfoos[idx],foos.at(idx)// Arrayfoos.has(el),foos.add(el),foos.delete(el)// Setfoos.item(idx),foos.namedItem(elementId)// HTMLCollectionfoos.dispose()// destroy selector observer / unsubscribe
It combines selector parts indexing fromselector-observer for simple queries and animation events frominsertionQuery 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
About
Observable selectors in DOM