https://github.com/bezborodow/mutation-initialiser
Initialise elements when inserted into the DOM.
https://github.com/bezborodow/mutation-initialiser
mutationobserver
Last synced: 3 months ago
JSON representation
Initialise elements when inserted into the DOM.
- Host: GitHub
- URL: https://github.com/bezborodow/mutation-initialiser
- Owner: bezborodow
- License: bsd-3-clause
- Created: 2023-05-27T10:51:33.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-25T19:18:34.000Z (over 1 year ago)
- Last Synced: 2024-04-26T03:23:21.689Z (about 1 year ago)
- Topics: mutationobserver
- Language: JavaScript
- Homepage: https://npmjs.com/package/mutation-initialiser
- Size: 48.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Mutation Initialiser
## Synopsis
`MutationInitialiser` provides a wrapper around
[`MutationObserver`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver)
to initialise
[elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) with a
[callback
function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
per a given
[selector](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)
as they are inserted into the Document Object Model
([DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)).
Common use case is to attach [event
listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener),
add CSS classes, or set other HTML element attributes once an element has been
loaded into the DOM.
```javascript
import { defaultInitialiser } from 'mutation-initialiser';
const initialise = defaultInitialiser(document, {
childList: true,
subtree: true,
many: true,
attributes: true,
watch: true,
});
initialise('div.example', element => {
// Do something to this element once.
});
```
### Installation
```console
npm i element-loaded-by-id
```
## Example
API documentation is missing whilst this is under development.
Feel free to browse the [examples](https://bezborodow.github.io/mutation-initialiser/examples/).
## See Also
Alternatives are:
* To simply receive a promise for when an element is loaded into the document,
consider [`elementLoaded()`](https://www.npmjs.com/package/element-loaded).
* To simply handle an event for an element that does not exist yet, consider using
[event delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events).
* For more complicated cases, use `MutationObserver` directly.
* For building [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements),
consider [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).