Transform nodes as they are added to the page.
With npm installed, run
$ npm install alchemize
Or, with Yarn,
$ yarn add alchemize
Alternatively, download alchemize.min.js
import alchemize from 'alchemize'
alchemize('.water', function(el) { $(el).addClass('wine').removeClass('water').text('wine') })
Or,
<script type="text/javascript" src="https://unpkg.com/alchemize@1.0.0/browser/alchemize.min.js"></script>
<script type="text/javascript">
alchemize('.water', function(el) { $(el).addClass('wine').removeClass('water').text('wine') });
</script>
Alchemize is based entirely on the MutationObserver
native class (including the prefixed WebkitMutationObserver
). If this class is not present, Alchemize will not work at all.
Runs transform
everytime a matching element is added to parent
.
matches
(required) - This argument is either:- A CSS selector string (ex.
"div#id.class"
) - A function that returns a boolean (ex.
(el) => el.nodeType === 1 && $(el).hasClass('.selector')
)
- A CSS selector string (ex.
transform
(required) - This argument is either:- A constant that the element will be replaced with (for example, plain text or a
Node
). - A function that operates on the element. (ex.
(el) => { $(el).addClass('added') })
)
- A constant that the element will be replaced with (for example, plain text or a
parent
(optional, default:document.documentElement
) - The top level element to watch for added childrens.
Observer
instance.
Starts watching for added nodes if not already.
Stops watching for added nodes.
Pauses observation until function terminates.
fn
(required) - Function to call once observation is suspended. Bound toObserver
instance.
- Whatever
fn
returns.
connected
(boolean
) - Whether the instance is observing or not.
MIT © James Anthony Bruno