dom-change-event

dom-change-event

Detect all changes in the DOM (added elements, removed elements, attributes updates)

Installation

npm i dom-change-event

Usage

import DomChangeEvent from 'dom-change-event';
DomChangeEvent(); // init the listener

// you can add these listeners for all HTML elements
document.body.addEventListener("addedNodes", (e) => {
    console.log("addedNodes in body element", e.detail);
});

document.body.addEventListener("removedNodes", (e) => {
    console.log("removedNodes in body element", e.detail);
});

const div = document.createElement("div");
document.body.append(div);
div.addEventListener("attributeChange", (e) => {
    console.log("attributeChange", e.detail);
    console.log("attributeName", e.detail.attributeName);

    console.log("attributeOldValue", e.detail.oldValue);
    const htmlElement = e.detail.target;
    console.log("attributeNewValue", htmlElement.getAttribute(e.detail.attributeName));
});
div.setAttribute("myAttribute", "myValue");

setTimeout(() => {
    div.remove();
}, 2000);

Events list

Event	Description	Value
addedNodes	Get array of elements added in an HTMLElement	Array[HTMLElement]
removedNodes	Get array of elements removed from an HTMLElement	Array[HTMLElement]
attributeChange	Get attribute change information from an HTMLElement	attributeName: The name of the attribute oldValue: The old value attribute target: the HTMLElement