SelectorObserver.js

Monitor elements by CSS selector

Usage

import {SelectorObserver} from '../SelectorObserver.js';
new SelectorObserver({
    on: el => el.innerHTML = 'found!' ,
    off: el => el.innerHTML = 'lost!' ,
}).observe('#SOTargets div');

<div class=container id=SOTargets contenteditable>
    Find all bold divs (press enter)
</div>

doc

Install

import * as module from "https://cdn.jsdelivr.net/gh/u1ui/SelectorObserver.js@x.x.x/SelectorObserver.min.js"

Demos

minimal.html
test.html
tests.html

Options - "checkAnimation" (beta)

o.observer('.el', {checkAnimation: true});
    

Like this, you can event watch selectors like .el:has(img:hover) > tr:nth-child(2)
Trigger only on and not off right now. -->

About

• MIT License, Copyright (c) 2022 (like all repositories in this organization)
  
• Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥