Are there any DOM manipulation libraries in ClojureScript?

Build your SPA in ClojureScript!

Master Reagent and Re-frame with my ClojureScript Frontend Signature Course.

• 3 frontend modules
• 72 detailed lessons
• 19 hours of video

buy now

Summary: ClojureScript has some nice DOM manipulation options, including jQuery and more idiomatic libraries.

Yes. ClojureScript has access to all JavaScript libraries, including jQuery. But there are also has native DOM libraries available. What's more, there are three advantages that native libraries have over jQuery.

1. Macros. A lot of processing can be done at compile time. For instance, parsing and interpreting of selector strings can be done during compilation.
2. The functional nature of ClojureScript. jQuery does a lot to make sure that chaining works very smoothly. ClojureScript's functional programming and threading macros make this less important. A lot of the functionality is built-in to Clojure.
3. ClojureScript protocols. Protocols allow you to extend the functionality of existing types. That means if you want to add "methods" to all DOM nodes, you can. This gives you that jQuery-object feeling without boxing everything up.

LispCast Single Page Applications with ClojureScript and Om does not use the DOM manipulation approach because Om uses React to build views. But DOM manipulation is still a common frontend technique.

jayq

If you are familiar with jQuery, jayq will be very familiar. It is simply a jQuery wrapper library. I've used this before in production and it has a lot going for it. One, it's just jQuery, which a lot of people know. Two, the selector engine jQuery uses is one of the most full-featured. You get full access to that. Three, jQuery is probably cached in everyone's browser already, so there's likely no download. The downside? It is just jQuery. It's mutable objects and encourages that same jQuery style of programming.

dommy

Dommy is nice. It's got functions for selecting DOM nodes, manipulating them, and listening to events. It takes advantages of ClojureScript's macros. For ins tance, the selectors are parsed at compile time and converted directly into standard DOM selection code. So the code (sel1 "#container") gets converted directly into document.getElementById("container"). That makes it much faster than jQuery, though not as full-featured. This is the one I recommend for selecting DOM elements and binding to events.

hipo

If you need to create DOM nodes, dommy won't do that for you. You'll need a library like hipo. Hipo converts hiccup syntax into native DOM creation code at compile time. That means your hiccup templates are as fast as possible. Pair this with dommy and you have a complete solution.

Domina

Aims to be jQuery-like but also idiomatic ClojureScript. It has xpath as well as CSS selectors, DOM manipulation, and an event system based on Google Closure's events.

Conclusions

DOM manipulation is still an important tool in JavaScript apps. ClojureScript has a good variety of libraries with approaches that make it easier and more idiomatic than jQuery. You should evaluate the options and see if one works for you.

If you're interested in learning ClojureScript, albeit with Om, not one of the above libraries, you should give Lispcast Single Page Applications with ClojureScript and Om a look. It teaches you how to build an application from the gound up using functional programming. The course includes animations, exercises, and code casts to make it the fastest and most effective way to learn to build apps in ClojureScript with Om.