DOMWatcher

A class for defining events that occur when a new element is added to the DOM.

Installation

npm i dug-domwatcher

Usage

import DOMWatcher from 'dug-domwatcher'

const watcher = new DOMWatcher()

Handling all new elements

watcher.addElementListener("all", el => {
    // do what you want with the element
})

Handling elements only of a certain tagname

watcher.addElementListener("form", el => {
    // only handles form elements
})

Custom filters

function isProductCard(el) {
    return el.classList.contains("product-card")
}

watcher.addElementListener(isProductCard, el => {
    // only handles elements with a class of "product-card"
})

On page load

By default, the elements wont be handled when the DOM first loads, but only when they are added to the DOM after the fact. You can force the handler to run on page load with true as an optional third argument.

watcher.addElementListener(tagNameOrFilter, handler, true)