Do not store application data in the DOM

Many web applications use DOM elements to store application state. It’s better to store application state in pure Javascript objects to achieve simpler designs with have better performance and less complexity.

This video shows the complexity of the Confluence DOM tree versus how I am doing it.

It’s better to represent application state information in Javascript objects which should be the source of truth and then just display this information in the DOM.

i.e. Application State In Javascript → rendered into → DOM

never

DOM → state extracted → Application state.

You have to get used to the idea of writing some code which manipulates DOM objects and then establishes a simple map back to your object model.

So for a tree control for instance when a user clicks on a item in the tree one needs code to traverse the parents and come back with an array of the location in tree.

One one has the location address one can then map into the Javascript objects which are your source of truth.

The data model represented in Javascript objects has the actual state.

The DOM objects just represent a view of that state.

See Separation of Concerns

One nice thing about this design approach is one is saved all the headaches of needing to escape special characters that conflict with HTML etc.