https://github.com/WebReflection/qso
A MutationObserver like API for CSS selectors.
https://github.com/WebReflection/qso
Last synced: over 1 year ago
JSON representation
A MutationObserver like API for CSS selectors.
- Host: GitHub
- URL: https://github.com/WebReflection/qso
- Owner: WebReflection
- License: isc
- Archived: true
- Created: 2018-11-20T20:50:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-08-05T08:42:17.000Z (about 6 years ago)
- Last Synced: 2024-08-02T05:06:46.608Z (about 2 years ago)
- Language: JavaScript
- Homepage: https://webreflection.github.io/qso/test/
- Size: 12.7 KB
- Stars: 31
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Deprecated: QuerySelectorObserver
Please use **[qsa-observer](https://github.com/WebReflection/qsa-observer#readme)** instead, as it's been used in various other libraries, hence it's way more battle-tested, and better, than this initial attempt.
- - -
100% inspired by a [Daniel](https://twitter.com/csuwildcat)'s [hack](http://www.backalleycoder.com/2012/08/06/css-selector-listeners/), this module brings a friendly [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) like API to observe CSS selectors instead.
```js
const so = new QuerySelectorObserver(records => {
for (const record of records) {
if (record.addedNodes.length) {
record.target.textContent = 'Hello via QSO!';
console.log(record.addedNodes);
} else {
console.log(record.removedNodes);
}
}
});
so.observe('.some-selector');
so.observe('#some-complex > .selector + p.cool');
button.onclick = () => so.disconnect();
```
Compatible with IE11 and other browsers, feel free to [test it live](https://webreflection.github.io/qso/test/).