Member-only story

Building A Better JavaScript DOM Builder : Part 2 Extending System Objects

Published in

CodeX

13 min readApr 20, 2024

In part one I introduced my DOM-JON concept. Reformulating HTML into a JSON-style namespace; Showing a rudimentary routine for translating it directly onto the DOM; Going over the reasons to go straight to the DOM instead of trying to fiddle around with InnerHTML.

Quick side note, the purpose of these articles is not to teach you to use this, it’s to share my thought process as I build it. In real-time. So I can get feedback. So I can get things written down as I go for my own reference. Documentation and a full website for it comes later.

This time around I want to make it easier to apply multiple Node to a single existing Element, to give access to the “attach” part of the older “make” routine as a standalone, and make attribute handling a bit more robust.

’Cause there are some things missing. Element.style or Element.dataset for example can’t be applied via Object.assign on the element, you have to apply them to the property. It would also be nice if “attribute objects” in the DOM-JON structure could be used to pass other information like how to “place” the element via insertAdjancentElement.

And the best way I know to simplify that part?

Extending System Objects

is it also time to create a global document element selector?

document.__get(...)

call with "id" instead of the getElementById(),

call it with {class:"my"} instead of getElementsByClassName(),

{name}... {tagName}, etc...

Will this kind of approach add value with a web components (custom elements) approach? Or you are more envisaging that you would use this approach instead of web elements? Interested in your thoughts actually about web components in general