Javascript, tiny functional helpers for modifying the DOM

Spencer — Sat, 13 Apr 2024 23:53:27 +0000

Hey all o/, I'm a vanilla JS nut who's recently been on a functional style programming kick. It's been great in methods ... until it came time to modifying elements in the DOM.

It doesn't seem like there is a good way to approach element creation and manipulation with my favorite functions: .map(), .forEach(), .reduce(), etc... I know jQuery accomplishes this but I think it's just too much! I don't want anything other than to easily work with HTML elements.

So I made a way :D

I've created three helper functions: Create(), Select()andMSelect()

Where:

Create('node name') creates an html element
Select('#___') selects a single node
MSelect('.___') selects a list of nodes

Each helper function takes an object as a second parameter to assign native properties to during creation or selection. All functions return the element or elements after creation or modification. That's all it does.

Here's an example...

document.body.appendChild(
    Create('div', {
        children: [
            Create('h1', {
                innerHTML: 'Welcome to JSUI',
                id: 'title',
                style: {
                    color: '#222222'
                }
            }),
            Create('p', {
                innerHTML: 'Why would you use this?'
            }),
            Create('ul', {
                id: 'my_list',
                children: [
                    'It allows a functional approach to element creation, selection and manipulation',
                    'Its absolutely tiny',
                    'Its not magic. It just assigns properties and children using functional methods'
                ].map(x => {
                    return Create('li', {
                        innerHTML: x,
                        className: 'my_list_elements',
                        onclick: function () {
                            console.log('Here is my list:');
                            console.log(Select('#my_list'));
                            console.log('Now I make the list elements bold');
                            MSelect('.my_list_elements', {
                                style: {
                                    fontWeight: 'bold'
                                }
                            });
                        }
                    })
                })
            })
        ]
    })
);

Minified code:
var Select=function(e,t={}){return 0===Object.keys(t).length?document.querySelector(e):Create(document.querySelector(e),t,!0)},MSelect=function(e,t={}){return 0===Object.keys(t).length?document.querySelectorAll(e):document.querySelectorAll(e).forEach((e=>Create(e,t,!0)))||document.querySelectorAll(e)},Create=function(e,t={},r=!1){return Object.keys(t).reduce(((e,r)=>Array.isArray(t[r])?t[r].forEach((t=>e.appendChild(t)))||e:"object"==typeof t[r]?null&Object.assign(e[r],t[r])||e:Object.assign(e,{[r]:t[r]})),r?e:document.createElement(e))};

Github repo if you're interested in checking it out!
https://github.com/kapenike/JSUI/

Since this is a helper function and not a library, it doesn't protect you, everything is as ordered. If you assign children before you assign innerHTML .... the children will be overridden because well ... thats how Javascript works. Make sure to define properties in logical order in an edge case like this.

Happy coding :D

DEV Community: Spencer

Javascript, tiny functional helpers for modifying the DOM