linfn
6/14/2019 - 3:06 PM

select and monitor dom elements

select and monitor dom elements

function selectAndMonitor(target, selector, handler) {
    let config = { childList: true, subtree: true }
    let record = new WeakSet()
    let callback = mutations => {
        for (let m of mutations) {
            for (let n of m.addedNodes) {
                if (n.nodeType !== Node.ELEMENT_NODE) {
                    continue
                }
                if (n.matches(selector)) {
                    if (!record.has(n)) {
                        record.add(n)
                        handler(n)
                    }
                }
                for (let v of n.querySelectorAll(selector)) {
                    if (!record.has(v)) {
                        record.add(v)
                        handler(v)
                    }
                }
            }
        }
    }
    let observer = new MutationObserver(callback)
    observer.observe(target, config)

    target.querySelectorAll(selector).forEach(v => {
        record.add(v)
        handler(v)
    })

    return () => {
        observer.disconnect()
        record = null
    }
}