A JavaScript library to watch the DOM changes in a single callback

Overview

watchmydom

A Javascript library to watch the DOM changes in a single callback

Demo

Click here to see the detailed demo.

Download

Minified script file has been added in the build folder.

Installation/Usage

  1. Add the library script into your page
<script src="watchmydom.min.js"></script>
  1. Initialize watchMyDom object in your custom script. You can use a class name, id or a tagName.
var watchIt = new watchMyDom("#div-id");
  1. Use watch() method to start watching.
watchIt.watch(function (result, info) {
	//Callback
});
  1. Use stop() method to stop watching.
watchIt.stop();

npm Installation

  1. Install the package

    npm i watchmydom
  2. Use the module as shown below.

    var watchmydom = require("watchmydom");
    var domResults = new watchmydom(".dom-results");

Methods

Methods Usage
watch() Use this to start watching
stop() Use this to stop watching

Callbacks

You can see the DOM updates/changes in the watch() calllback function.

Parameters Usage
result Sorted observations
info Complete observations

License

MIT

Code

Saif

You might also like...

Create a HTML table from JSON that can be sorted, selected, and post-processed using a simple callback.

Create a HTML table from JSON that can be sorted, selected, and post-processed using a simple callback.

Tidy Table Create a HTML table from JSON that can be sorted, selected, and post-processed using a simple callback. Features Extensible HTML/CSS interf

Aug 16, 2022

A useful list of must-watch talks about JavaScript

Must-Watch JavaScript This is a collection of well-received talks about JavaScript, covering topics such as ES6/ES2015, JavaScript frameworks, client-

Jan 4, 2023

In this website you will add books and also watch the lists of books. A website build wit HTML, CSS, and JavaScript.

Awesome Books ES6 In this website you will add books and also watch the lists of books. Built With HTML CSS JavaScript Authors 👤 HaaDiiii GitHub: @Ha

Oct 7, 2022

In this website you will add favorites books and also watch the lists of books. Built with JavaScript ES6 Modules

In this website you will add favorites books and also watch the lists of books. Built with JavaScript ES6 Modules

Awesome Books In this website you will add books and also watch the lists of books. Built With HTML CSS JavaScript Screen Shots Desktop Screen Tablet

Nov 20, 2022

An easy-to-use library that provide acronymous sending on form changes

An easy-to-use library that provide acronymous sending on form changes

Form Async Form Async is an easy-to-use library that provide acronymous sending on form changes. It's a great solution to preventing data loss when fi

Jan 5, 2022

A small javascript DOM manipulation library based on Jquery's syntax. Acts as a small utility library with the most common functions.

Quantdom JS Quantdom is a very small (about 600 bytes when ran through terser & gzipped) dom danipulation library that uuses a Jquery like syntax and

Aug 16, 2022

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

lazysizes lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), ifra

Jan 1, 2023

App that allows you to control and watch YouTube videos using hand gestures. Additionally, app that allows you to search for videos, playlists, and channels.

App that allows you to control and watch YouTube videos using hand gestures. Additionally, app that allows you to search for videos, playlists, and channels.

YouTube Alternative Interaction App An app I made with Edward Wu that allows you to search and watch videos from YouTube. Leverages Google's YouTube D

Dec 28, 2021
Owner
Muhammed Saifudeen (saif)
I enjoy making web templates, web animations, interactions, libraries, or any other thing based on the web.
Muhammed Saifudeen (saif)
Add class(es) to DOM elements while waiting for async action. Promise or callback.

jquery.loading Add class(es) to DOM elements while waiting for async action. Promise or callback. Install The simplest way is to include loading.js in

Dumitru Uzun 1 Mar 26, 2022
A lightweight function that executes callback when we see specific DOM elements.

did-i-see A lightweight function that executes callback when we see specific DOM elements. Built with IntersectionObserver. ?? Demo: https://did-i-see

Kaan Ersoy 4 Oct 18, 2022
An extension of DOM-testing-library to provide hooks into the shadow dom

Why? Currently, DOM-testing-library does not support checking shadow roots for elements. This can be troublesome when you're looking for something wit

Konnor Rogers 28 Dec 13, 2022
JavaScript micro-library: pass in an element and a callback and this will trigger when you click anywhere other than the element

Add a click listener to fire a callback for everywhere on the window except your chosen element. Installation run npm install @lukeboyle/when-clicked-

Boyleing Point 5 May 13, 2021
Custom Vitest matchers to test the state of the DOM, forked from jest-dom.

vitest-dom Custom Vitest matchers to test the state of the DOM This library is a fork of @testing-library/jest-dom. It shares that library's implement

Chance Strickland 14 Dec 16, 2022
Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback

Dynamic BS5 Modal Box Create Bootstrap 5 Modal Box using JavaScript with custom title, description, button labels and custom YES button callback Insta

null 5 Oct 23, 2022
Cypress commands are asynchronous. It's a common pattern to use a then callback to get the value of a cypress command

cypress-thenify Rationale Cypress commands are asynchronous. It's a common pattern to use a then callback to get the value of a cypress command. Howev

Mikhail Bolotov 15 Oct 2, 2022
Simple patch that adds a 'progress' callback to jquery Ajax calls

Jquery Ajax Progresss A simple patch to jQuery that will call a 'progress' callback, using the XHR.onProgress event Usage Simply include the script on

Chad Engler 118 Sep 8, 2022
Detect F12 open console, protect web static resources, support redirect, rewrite, callback strategies.

console-ban Detect F12 open browser console. protect web site static resources, support redirect, rewrite, custom callback strategies. Language: Engli

Yingci 623 Dec 26, 2022
Plug-and-play, faster-than-native promise/callback event emitter

kNow Blazing-fast callback/promise-based events with a tiny footprint What is this? With kNow (pronounced "now"—the k's silent), JavaScript event mana

Elijah Bodden 25 Sep 11, 2022