Binding Javascript Objects to DOM Elements in Vanilla JS

Question

so this is mainly a question of best Javascript practices. I'm creating a library with vanilla JS for an alarm clock.

It goes something like:

HTML

<div>current time</div>
<form> ... </form>         <!-- create new alarm -->
<ul id="alarms"></ul>

JS

 // init variables to select DOM elements
 var Alarm = function() {
   // has a ring function, private vars for name, ringtone, time, isActive
 }
 var AlarmClock = function() {
    var alarms = []
    this.createAlarm = function() {
      // creates Alarm and pushes it to alarms array
      // also creates Alarm DOM element to append to the <ul>
    }
 }

I definitely feel that it is redundant to create both a DOM element and a Javascript Object for an Alarm so I'm wondering if it's possible to incorporate them into one method? I'm thinking that we can just push the DOM Elements to the alarms array in the AlarmClock class so that when I implement alarm deletion, I can just splice the array and the DOM objects would disappear.

Or if there's some way to bind an HTML DOM Element to the Javascript class. I looked at this which suggests using jQuery data() but I want to accomplish it with vanilla JS. I was thinking I could also just add a property to an Alarm object that references the corresponding DOM element but I'd love to hear some experienced programmers chime in on what the best practices would be.

So this question doesn't have a specific issue, this is purely opinion based? — NewToJS
– NewToJS, Commented Oct 11, 2016 at 9:13
@NewToJS the issue is how to apply good practice to solve this problem — cheng
– cheng, Commented Oct 11, 2016 at 9:25
Related: Javascript DOM: Setting custom DOM element properties, Adding custom ( your own ) properties to DOM objects, OK?, Is it bad practice to add properties to DOM nodes? — Felix Kling
– Felix Kling, Commented May 2, 2019 at 18:58

Chris Ferdinandi · Accepted Answer · 2019-05-02 18:52:23Z

0

From an article I wrote on objects in JavaScript:

In JavaScript, everything is an object, even when it’s something else. Functions are objects. Strings are objects. Numbers are objects. Arrays are objects. Objects are objects. As a result, anything can have properties assigned to it.

That means that yes, you can assign those properties directly to a DOM node (or more specifically, the JS variable you have it cached to).

answered May 2, 2019 at 18:52

Chris Ferdinandi

1,9624 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Felix Kling Over a year ago

But DOM nodes are also host objects so they may not behave like "normal" objects.

Collectives™ on Stack Overflow

Binding Javascript Objects to DOM Elements in Vanilla JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related