TinyJS – Shorten JavaScript QuerySelect with $ and $$

Post by nattaylor » Wed, Oct 02, 2024, 9:52 PM UTC

akira2501 wrote: post #57

nattaylor wrote: post #53

Earlier quoted context omitted.

If you like brittle things, the id attribute is already made into an attribute on the window for legacy reasons Edit: My tone may have indicated that parent's solution was brittle. It's not!

The id attribute can take on values that are already present or reserved in window. "fetch", "opener", etc.. The reason to have a separate system that correctly calls getElementById() is to avoid this issue. So, it's actually a _less_ brittle mechanism that doesn't rely on legacy mechanisms and lacks the surprises that come with that.

Post by im_nullable » Wed, Oct 02, 2024, 9:55 PM UTC

Post by esprehn » Wed, Oct 02, 2024, 10:04 PM UTC

open-paren wrote: post #54

akira2501 wrote: post #50

I've been using this for years: const $id = new Proxy({}, { // get element from cache, or from DOM get: (tgt, k, r) => (tgt[k] || ((r = document.getElementById(k)) && (tgt[k] = r))), // prevent programming errors set: () => $throw(`Attempt to overwrite id cache key!`) }); It's nice to be able to refer to elements by property name, so: Is reachable with: $id.thing And, since the underlying structure is just an object,…

Element IDs are automatically attached to the window object document.addEventListener('DOMContentLoaded', () => { window.thing.innerHTML = 'Hello, World!'; });

Post by tbeseda » Wed, Oct 02, 2024, 10:11 PM UTC

wackget wrote: post #17

yu3zhou4 wrote: post #2

Like jQuery but for 2024?

That would just be jQuery.

Post by jonathrg » Wed, Oct 02, 2024, 10:19 PM UTC

akira2501 wrote: post #50

I've been using this for years: const $id = new Proxy({}, { // get element from cache, or from DOM get: (tgt, k, r) => (tgt[k] || ((r = document.getElementById(k)) && (tgt[k] = r))), // prevent programming errors set: () => $throw(`Attempt to overwrite id cache key!`) }); It's nice to be able to refer to elements by property name, so: Is reachable with: $id.thing And, since the underlying structure is just an object,…