1.1.0 docs





    Apr 28, 2015

    Moved to plumatic


    Index of all namespaces

    The README below is fetched from the published project artifact. Some relative links may be broken.

    A ClojureScript DOM manipulation and event library.


    Add the following dependency to your project.clj:

    [prismatic/dommy "1.0.0"]

    Upgrading to 1.0.0+ from 0.X.Y

    Version “1.0.0” includes breaking API changes. Here’s a quick overview of what’s changed:

    • dommy.template namespace and all related templating features (node, deftemplate, etc) have been removed from the library.
    • Simplified namespace structure. Everything in dommy.macros and dommy.attrs has been moved into dommy.core

    See or for more details.

    If you are looking for hiccup-style templating features, check out


    DOM nodes are selected using macros, which expand to the correct native dom calls. Because selectors don’t wrap returned nodes, there is a distinction between single and multiple selections. A selector can be a keyword, string or vector.

        [dommy.core :refer-macros [sel sel1]]))
    (sel1 :body) ; => document.body
    (sel1 :#header) ; => document.getElementById("header")
    (sel1 ".todo") ; => document.getElementsByClassName("todo")[0]
    (sel [:#todos :li]) ; => document.querySelectorAll("#todos li")

    Sometimes its useful to specify the base node from which the selection takes place.

    (sel1 todos-element :.todo)

    DOM Manipulation

    Inspired by jQuery, but adapted to be functional in order to better fit with ClojureScript core.

    (dommy/append! (sel1 :#todos) todo-element)
    (doseq [todo (sel :.todo)]
      (dommy/add-class! todo :complete))
    (map dommy/text (sel :.todo))

    Functions that modify take the target node as their first argument, and return the same modified node, allowing the use of threading macros to accomplish jQuery-like chaining.

    (-> (sel1 :#my-button)
    	(dommy/remove-attr! :disabled)
    	(dommy/add-class! :active)
    	(dommy/set-text! "Click me!"))
    (->> (sel :.image)
    	 (filter #(> (dommy/px % :width) 500))
    	 (map #(dommy/add-class! % :big-image)))


    Dommy’s event API closely resembles the native JavaScript API.

        [dommy.core :as dommy :refer-macros [sel1]]))
    (defn click-handler [e]
        (.log js/console "You clicked my button! Congratulations"))
    (dommy/listen! (sel1 :#my-button) :click click-handler)
    (dommy/unlisten! (sel1 :#my-button) :click click-handler)

    If the first argument to listen! is a sequence, the handler will delegate events to the selected element defined by the sequence. A special property selectedTarget added to the event specifies the element selected.

    (defn todo-click-handler [e]
      (.log js/console "The clicked todo is" (.-selectedTarget e)))
    (dommy/listen! [todos-element :.todo] :click todo-click-handler))


    For all pull requests, please ensure your tests pass (or add test cases) before submitting.

    $ lein cljsbuild test


    Copyright (C) 2014 Prismatic

    Distributed under the Eclipse Public License, the same as Clojure.