Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vdegenne/element-observer
ES Module version of MutationObserver wrapper package
https://github.com/vdegenne/element-observer
Last synced: about 1 month ago
JSON representation
ES Module version of MutationObserver wrapper package
- Host: GitHub
- URL: https://github.com/vdegenne/element-observer
- Owner: vdegenne
- Created: 2019-10-17T14:47:56.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2019-10-27T16:32:24.000Z (about 5 years ago)
- Last Synced: 2024-11-14T10:06:45.330Z (about 2 months ago)
- Language: HTML
- Size: 11.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ElementObserver
Element similar to MutationObserver but more easy to use.
## usage
Include the script in the page
```html
```
then on one of your element
```javascript
const elementToWatch = document.getElementById('myElement')
const observer = ElementObserver.observe(elementToWatch, (mutations, element) => {
console.log(`myElement changed`)
})
```
### disconnecting
```javascript
observer.disconnect()
```
### subtree
By default the callback (*2nd argument*) is called everytime the children of the element (*1st argument*) change, that is when new children are added or existing children are removed.
If you wish to watch the children of the children recursively (all the subtree), pass `true` as the last argument :
```javascript
ElementObserver.observe(
elementToWatch,
(mut, el) => { /* callback */ },
true
)
```
### child_list & character_data
By default the observer only reacts when nodes are added or removed (as stated above).
If you wish to watch for textual changes only provide the type as the 2nd argument :
```javascript
ElementObserver.observe(
elementToWatch,
ElementObserver.CHARACTER_DATA,
(mut, el) => {
/* called everytime text changes in the element */
}
)
```
*NOTICE: the last argument is omitted and implicitily `true` when using `character_data` because internally `MutationObserver` expects a text node to be provided.
If you want to prevent all the subtree to be watched you will have to provide `false` for the last argument and a text node as the first argument.*
## Summary
```javascript
/* CHARACTER DATA */
ElementObserver.observe(elementToWatch, ElementObserver.CHARACTER_DATA, callback, true) // subtree: true
// same as
ElementObserver.observe(elementToWatch, ElementObserver.CHARACTER_DATA, callback) // subtree: true
// same as
ElementObserver.observe(elementToWatch, 'character_data', callback) // short version (string)
// same as
ElementObserver.observe(elementToWatch, 2, callback) // short version (number)
/* CHILD LIST (default) */
ElementObserver.observe(elementToWatch, ElementObserver.CHILD_LIST, callback, false) // subtree: false
// same as
ElementObserver.observe(elementToWatch, ElementObserver.CHILD_LIST, callback) // subtree: false
// same as
ElementObserver.observe(elementToWatch, 'child_list', callback) // short version (string)
// same as
ElementObserver.observe(elementToWatch, 1, callback) // short version (number)
// same as
ElementObserver.observe(elementToWatch, callback) // default very short version
```
## Installation
```npm i element-observer```