domejs is a minimal proxying shortcut DOM library. It provides a single function, called $ or dome, that wraps up the repetitive parts of writing DOM code while still looking essentially like standard DOM API usage.
The $ function has two uses: creating new elements (new $('li.important')), and retrieving existing elements to manipulate together ($('input[type=text].search').value = ''). Obtain the code and load the function with import $ from './dome.js', or try it out below.
$ accepts a CSS selector and finds all matching elements on the page. Regardless of how many matching elements there are, they can each have the same operations performed on them in a single line. Properties can be written to with standard assignment or looped over, including nested properties, and standard DOM methods can be called directly across all matching elements.
$('input[type=text]').value = ''
This will empty all text input fields in the page.
$('input.important').style.background = '#fcc'
This will turn the background of all important inputs pink.
To update a property individually, with the new value computed using the old or some other aspect of the element, every property has an update method as well:
$('input[type=number]').value.update(x => x / 2)
This halves the value of all number inputs.
$('input.q').value.update((cur, el) => cur + el.dataset.p)
This changes the value of every input with class q to the concatenation of its current value and the data-p attribute on the element.
with the path to your local dome.js file, and then used as above.
Code you enter will be executed with eval. Both $ and dome are available. The dashed area above is a div#scratch, which you can fill with useful elements using the button above. Click a single-line sample above to copy it into the textbox to run. The return value of the code is looped over and logged to the browser console. You can also use dome from your browser console directly on this page.