https://github.com/nicholaswmin/dom
fluent DOM in ~400 bytes
https://github.com/nicholaswmin/dom
dom dom-api fluent-api
Last synced: 5 months ago
JSON representation
fluent DOM in ~400 bytes
- Host: GitHub
- URL: https://github.com/nicholaswmin/dom
- Owner: nicholaswmin
- Created: 2024-12-20T22:23:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-22T16:32:14.000Z (over 1 year ago)
- Last Synced: 2025-10-06T20:56:07.235Z (9 months ago)
- Topics: dom, dom-api, fluent-api
- Language: HTML
- Homepage: https://nicholaswmin.github.io/dom/
- Size: 50.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[![test-workflow][test-badge]][test-workflow]
## `dom`
> concise [DOM api][dom-api] in `~ 400 bytes`
- concise selectors: `$('.foobar')`
- concise event methods: `.on('event', fn)` / `.off('event', fn)`
- an additional `css(..)` method.
- [method-chaining][fluent-api]
## todo
- [x] fix CI tests
- [x] fix event tests
- [x] add a carbon snippet here
- [ ] snippetify that code thing
## rationale
I often hack up short HTML sandboxes for testing a component I'm working on.
These boilerplate files are best kept *stupidly-simple*
so as not to distract from the actual component itself. In other words:
dont use a framework.
However, the native DOM API is annoyingly verbose even for the simplest of
tasks, which ends up cluttering the file in and by itself.
Ergo, this.
The 3 methods covered here replace common but unbearably verbose
DOM API methods with consice, chainable equivalents.
It doesn't cover everything but that's by design:
It's small API surface means there's nothing to memorise,
it's impossible to break & straightforward to understand,
even if you've never read a single word of this document.
Yes, it's like jQuery.
## usage
drop this:
```html
```
or just copy/paste the [source](./dom.js) in your own project.
I use it as an editor code-snippet.
## api
selecting elements:
```js
$.$$('div') // select all divs
$.$('div') // select first matching
```
style props:
```js
$.$$('div').css({ background: 'red' })
// all divs are now red
```
event listeners:
```js
c.on('click', function(e) {
this.css({ color: 'red', cursor: 'pointer' })
// set styles
})
.on('mouseover', function(e) {
// is chainable
})
.css({ color: 'black' })
```
remove listeners:
```js
// remove all click listeners
$.$$('div').off('click')
// remove all listeners, for all divs
$.$$('div').off()
```
actual DOM elements:
```js
// actual DOM element
$.$('div').$
// actual DOM elements
$.$$('div').$$
// example
$.$('div').$.textContent = 'hello world'
```
## tests
```bash
node --import ./test/setup.js --test
```
> [!note]
> requires: node `v22+`
## misc
> serve demo
```bash
npx serve
```
## license
> [ISC License][isc]
>
> @nicholaswmin, 2024
>
> Permission to use, copy, modify, and/or distribute or resell this software
> for *any purpose* is hereby granted *without fee*, provided that the above
> copyright notice and this permission notice appear in all copies.
[test-badge]: https://github.com/nicholaswmin/dom/actions/workflows/test.yml/badge.svg
[test-workflow]: https://github.com/nicholaswmin/dom/actions/workflows/test.yml
[website]: https://nicholaswmin.github.io/dom
[nicholaswmin]: https://githhub.com/nicholaswmin
[fluent-api]: https://en.wikipedia.org/wiki/Method_chaining
[ignore]: https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files#configuring-ignored-files-for-all-repositories-on-your-computer
[dom-api]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
[isc]: https://spdx.org/licenses/ISC.html