Question

I’m new to js and need to extend dom Elements with my custom methods and data.

For data I’m using the dataset property built in html.
For methods I don’t know what to do.

Is there a well known best practice to achieve this ?

Answer 1

Creating wrapper objects around DOM elements and interacting with them instead of directly with the DOM element is the best way to extend functionality of elements and is the approach taken by jQuery and many other libraries. Some libraries (notably Prototype) extended DOM prototypes directly but this is a bad idea and unreliable.

Here’s a simple example of a wrapper:

function createElementWrapper(el) {
    return {
        element: el,
        hide: function () {
            el.style.display = "none";
        }
    };
}

var bodyWrapper = createElementWrapper(document.body);
bodyWrapper.hide();