SentinelJS is a tiny JS library that lets you detect new DOM nodes using CSS selectors (682 bytes).
SentinelJS is a tiny JS library that makes it easy to set up watch functions that will notify you anytime a new DOM node is added that satisfies a CSS selector rule. SentinelJS is useful for writing plugins that make modifications when a new DOM node is inserted. This can be useful for creating Shadow DOM-like experience where you can define interactive components using purely HTML.
The latest version of SentinelJS can be found in the dist/
directory in this repository:
You can also use it as a CJS or AMD module:
$ npm install --save sentinel-js
var sentinel = require('sentinel-js');
sentinel.on('my-awesome-component', function(el) {
// add more functionality to the element
el.innerHTML = 'The sentinel is always watching.';
});
<!doctype html>
<html>
<head>
<script src="//cdn.rawgit.com/muicss/sentineljs/0.0.1/dist/sentinel.min.js"></script>
<script>
// use the `sentinel` global object
sentinel.on('.my-div', function(el) {
el.innerHTML = 'The sentinel is always watching.';
});
// add a new div to the DOM
function addDiv() {
var newEl = document.createElement('div');
newEl.className = 'my-div';
document.body.appendChild(newEl);
});
</script>
</head>
<body>
<button onclick="addDiv();">Add another DIV</button>
<div class="my-div"></div>
</body>
</html>
- IE10+
- Opera 12+
- Safari 5+
- Chrome
- Firefox
- iOS 6+
- Android 4.4+
Use the on()
method to set up a watch for new DOM nodes.
cssSelectors
- A single selector string or an arraycallbackFn
- The callback function
Use the off()
method to remove a watch. If callbackFn
is emtpy, all watches for the given cssSelector will be removed.
cssSelectors
- A single selector string or an arraycallbackFn
- The callback function you want to remove the watch for (optional)
The reset()
method will remove all watches and callbacks from the sentinel library.
To make it easy to use SentinelJS asynchronously, the library dispatches a sentinel-load
event that will notify you when the library is ready to be used:
<!doctype html>
<html>
<head>
<script src="//cdn.rawgit.com/muicss/sentineljs/0.0.1/dist/sentinel.min.js" async></script>
<script>
// use the `sentinel-load` event to detect load time
document.addEventListener('sentinel-load', function() {
// now the `sentinel` global object is available
sentinel.on('.my-div', function(el) {
el.innerHTML = 'The sentinel is always watching.';
});
});
</script>
</head>
<body>
<div class="my-div"></div>
</body>
</html>
Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY