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.
New elements can be created from CSS selectors that describe them:
new $('a#home.important[href="/"]', 'Home', new $('img[src=/logo.png]'))
matching the selector, with the remaining arguments put into the body as with append. These are undecorated DOM elements and can be added to the page immediately. Element, class, ID, and attribute selectors can be combined as needed to describe the element.
$ 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.
All of the following work regardless of how many elements match:
$('a').style.color = 'red'
$('#nav > ul').lastElementChild.remove()
for (let s of $('img').src) console.log(s)
An empty ul above will also be handled without error.
Properties can be assigned to just as for a single element, including nested properties:
$('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.