dom-observe

![npm](https://img.shields.io/npm/v/dom-observe?style=for-the-badge)![npm](https://img.shields.io/npm/dw/dom-observe?style=for-the-badge)![npm](https://img.shields.io/npm/dt/dom-observe?style=for-the-badge) ![node](https://img.shields.io/node/v/dom-observ

Usage no npm install needed!

<script type="module">
  import domObserve from 'https://cdn.skypack.dev/dom-observe';
</script>

README

dom-observe

npmnpmnpm node

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 null

When 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, when DOMObserver.start is called
  • appear ($element: element returned with selector) - Occurs, when element appears in DOM
  • change ($element: element returned with selector, records: list of MutationRecord objects) - 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 DOM
  • stop - Occurs, when DOMObserver.stop is called