Fay[1], a subset of Haskell that compiles to JavaScript, seems to be the primary choice. There are DOM and jquery bindings for it and this blog post[2] looks like a great introduction.
There are other options, this [3] article outlines a number of them as a greater overview of both server and client side programming with Haskell. I also found an intriguing article [4] on the Haskell site but it appears to be out of date, referencing libraries that are no longer in development.
[1]https://github.com/faylang/fay/wiki
[2]http://ocharles.org.uk/blog/posts/2013-12-23-24-days-of-hack...
[3]http://www.stephendiehl.com/posts/haskell_web.html
[4]http://www.haskell.org/haskellwiki/Haskell_in_web_browser
main = plainText "Hello, World!"
From the page: "Elm is a functional language that compiles to HTML, CSS, and JavaScript".
So yes, technically this is working with the DOM. But you are not writing code that interacts with a "DOM binding" directly per se.
(To clarify: At the time that I last used Elm, the Signal type was a functor, but was intentionally being kept from being a monad for design reasons. Working around this restriction tought me a lot on why I needed monads.
Elm is a really fun way to start exploring purely functional programming.
http://purescript.readthedocs.org/en/latest/intro.html#hello...
Imagine that I'm making a page that converts meters to millimeters. The obvious part of the haskell code is
convert :: Double -> Double convert = 1000 *
The part which isn't obvious to me is how I get input from the user or display the result. I know how to do that in the IO monad through standard haskell, but I wouldn't know how to handle it in Haskell compile to javascript for the web browser. I would have thought that you would need a binding to the DOM to read from forms and the like.
$('#toggleLink').click(function() {
if ($('#toggleLink').html() == 'Show') {
showRollout();
$('#toggleLink').html('Hide');
} else {
hideRollout();
$('#toggleLink').html('Show');
]
});