dom-observe
v1.0.2
Published
 
Readme
dom-observe
DOMDeferredSelector
This class allows retrieve element when it will appear in DOM tree
For example:
<body>
<div class="wrapper">
<!-- There are some elements will be placed when AJAX request is completed -->
</div>
</body>const deferredSelector = DOMDeferredSelector.use<HTMLDivElement>(
() => document.querySelector('.ajax-inserted-element'),
{
interval: 250,
repeats: Infinity // Deferred selector will check the DOM forever
}
);Also, you can use alternative way to create deferred selector object
const deferredSelector = new DOMDeferredSelector(
() => document.querySelector('.ajax-inserted-element'),
{
interval: 250,
repeats: Infinity // Deferred selector will check the DOM forever
}
);
// You should activate it by yourself
deferredSelector.activate();Then you can use promise
deferredSelector.promise().then($element => {
// Do whatever you want to do with the element, but don't forget to check
// that the element isn't null
});If at some point you don't want to track the element, you can simply call
deferredSelector.cancel(); // Promise will be resolved with nullWhen the promise resolved and at some point you want to track the element again you can simply call
deferredSelector.reactivate();
deferredSelector.promise().then($element => {
// Do something with the element
});DOMObserver
DOMObserver allows track element appear, disappear and changes
const domObserver = new DOMObserver(
() => document.querySelector('.ajax-inserted-element'),
{
interval: 250, // How often to check whether element appeared or not
// Parameters inherits MutationObserverInit
}
);Then, to start the observer you simply need to run
domObserver.start();If at some point you don't want to track element changes, you can simply run
domObserver.stop();DOMObserver provides few events, you can subscribe to them in that way:
domObserver.on('start', () => console.log('Started'));
domObserver.once('stop', () => console.log('Stopped'));DOMObserver#events
start- Occurs, whenDOMObserver.startis calledappear($element: element returned with selector) - Occurs, when element appears in DOMchange($element: element returned with selector,records: list ofMutationRecordobjects) - Occurs, when element changed (this event occurs only when element is in DOM already)disappear($element: element returned with selector) - Occurs, when element is disappears from DOMstop- Occurs, whenDOMObserver.stopis called