{"id":16603163,"url":"https://github.com/laserpants/util-dom","last_synced_at":"2026-03-07T22:03:29.062Z","repository":{"id":13356856,"uuid":"16044357","full_name":"laserpants/util-dom","owner":"laserpants","description":"Fay DOM manipulation utility library","archived":false,"fork":false,"pushed_at":"2014-01-19T23:08:58.000Z","size":200,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-09T17:45:27.952Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laserpants.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-19T11:04:32.000Z","updated_at":"2014-01-19T23:08:58.000Z","dependencies_parsed_at":"2022-08-29T11:40:34.793Z","dependency_job_id":null,"html_url":"https://github.com/laserpants/util-dom","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/laserpants/util-dom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laserpants%2Futil-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laserpants%2Futil-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laserpants%2Futil-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laserpants%2Futil-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laserpants","download_url":"https://codeload.github.com/laserpants/util-dom/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laserpants%2Futil-dom/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30233429,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T19:01:10.287Z","status":"ssl_error","status_checked_at":"2026-03-07T18:59:58.103Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-12T00:47:54.200Z","updated_at":"2026-03-07T22:03:29.035Z","avatar_url":"https://github.com/laserpants.png","language":null,"readme":"util-dom\n========\n\n**Note:** This library is pretty much redundant. Instead, see: [https://github.com/faylang/fay-dom](https://github.com/faylang/fay-dom)\n\nBasic DOM manipulation API for Fay (the [Fay Programming Language](https://github.com/faylang/fay/wiki)).\n\nThis module provides a trivial `Element` data type and some basic FFI wrappers for a few of the standard JavaScript DOM functions (feel free to add more). It does not depend on jQuery or other third-party JavaScript libraries.\n\n    -- | Represents a DOM element.\n    data Element\n\n## Functions\n\n* [createElement](#createelement)\n* [appendChild](#appendchild)\n* [setAttribute](#setattribute)\n* [onLoad](#onload)\n* [documentBody](#documentbody)\n* [addWindowEvent](#addwindowevent)\n* [toString](#tostring)\n* [innerHtml](#innerhtml)\n* [outerHtml](#outerhtml)\n* [parentNode](#parentnode)\n* [getElementById](#getelementbyid)\n* [getElementsByClassName](#getelementsbyclassname)\n* [getElementsByTagName](#getelementsbytagname)\n* [setElementHtml](#setelementhtml)\n* [addEventListener](#addeventlistener)\n* [addElementEventListener](#addelementeventlistener)\n* [onClick](#onclick)\n\n### createElement\n\n    createElement :: String -\u003e Fay Element\n\nCreate an element with the specified name.\n\n**Example:**\n\n    el \u003c- createElement \"button\"\n\n### appendChild\n\nAdd an element after the last child node of the specified element.\n\n    appendChild :: Element    -- ^ Parent node\n                -\u003e Element    -- ^ The child element\n                -\u003e Fay ()\n\n\n### setAttribute\n\nAdd or set the attribute/value pair on the provided target element. \n\n    setAttribute :: Element    -- ^ An element\n                 -\u003e String     -- ^ Attribute name\n                 -\u003e String     -- ^ Attribute value\n                 -\u003e Fay ()\n\n\n### onLoad\n\nAdd an \"on load\" event listener to the window object.\n\n    onLoad :: Fay () -\u003e Fay ()\n\n**Example:**\n\n    stuff :: Fay ()\n    stuff = ...\n\n    main :: Fay ()\n    main = onLoad $ do stuff\n\n### documentBody\n\n\nRetrieve the document body element.\n\n    documentBody :: Fay Element\n\n### addWindowEvent\n\nAdd an event listener to the window object.\n\n    addWindowEvent :: String   -- ^ An event type\n                   -\u003e Fay ()   -- ^ The listener function \n                   -\u003e Fay ()\n\n### toString\n\nStringify an element.\n\n    toString :: Element -\u003e Fay String\n\n### innerHtml\n\nRetrieve the HTML between the start and end tags of the object.\n\n    innerHtml :: Element -\u003e Fay String\n\n### outerHtml\n\nReturn the object and its content.\n\n    outerHtml :: Element -\u003e Fay String\n\n### parentNode\n\nReturn the parent node of an element.\n\n    parentNode :: Element -\u003e Fay (Maybe Element)\n\nThis function returns a `Maybe Element` in the `Fay` monad, since a parent element doesn't always exist.\n\n### getElementById\n\nReturn the element with the id attribute matching the specified value, if one exists.\n\n    getElementById :: String -\u003e Fay (Maybe Element)\n\nThis function returns a `Maybe Element` to properly handle cases where no element is found matching the provided id.\n\n**Example:**\n\n    doStuff :: Fay ()\n    doStuff = do\n        el \u003c- getElementById \"my-element\"\n        case el of\n            Nothing -\u003e return ()\n            Just e  -\u003e doSomethingWith e\n\n### getElementsByClassName\n\nReturn a list of elements which matches the provided class name(s).\n\n    getElementsByClassName :: String -\u003e Fay [Element]\n\n### getElementsByTagName\n\nReturn a list of elements with the specified tag name.\n\n    getElementsByTagName :: String -\u003e Fay [Element]\n\n### setElementHtml\n\nSet the inner HTML of the document's body element.\n\n    setBodyHtml :: String -\u003e Fay ()\n\n### addEventListener\n\nRegister an event listener on an element.\n\n    setHtml :: Element -\u003e String -\u003e Fay ()\n\n**Example:**\n\n    createButton = do\n        btn \u003c- createButton \"Hello\"\n        addEventListener btn \"click\" doStuff\n\n### addElementEventListener\n\nRegister an event listener on the element with the specified id. Does nothing if no element exists with the provided id.\n\n    addEventListener :: Element -\u003e String -\u003e Fay Bool -\u003e Fay ()\n\n### onClick\n\nRegister an \"on click\" event listener.\n\n    onClick :: String      -- ^ The id of the event target\n            -\u003e Fay Bool    -- ^ A listener function\n            -\u003e Fay ()\n\n## More elaborate examples\n\n    module Examples where\n    \n    import Prelude\n    import FFI\n    import Util.DOM\n    \n    alert :: String -\u003e Fay ()\n    alert = ffi \"alert(%1)\"\n    \n    doStuff :: Fay Bool\n    doStuff = do \n        alert \"Let the drama begin!\"\n        return False\n    \n    createButton :: String -\u003e Fay Element\n    createButton title = do\n        el \u003c- createElement \"button\"\n        setHtml el title  -- Replace inner HTML with the title\n        return el\n    \n    -- | Uses createElement, setAttribute, addEventListener and appendChild\n    example1 :: Fay ()\n    example1 = do\n        btn \u003c- createButton \"Hello\"\n        setAttribute btn \"style\" \"border:2px solid red\"\n        addEventListener btn \"click\" doStuff\n        body \u003c- documentBody\n        appendChild body btn\n    \n    example2 :: Fay ()\n    example2 = do\n        el \u003c- createElement \"div\"\n        setHtml el \"hello\"\n        setAttribute el \"id\" \"hello-div\"\n    \n        p \u003c- createElement \"p\"\n        setHtml p \"world\"\n    \n        body \u003c- documentBody\n        appendChild body el\n    \n        div \u003c- getElementById \"hello-div\"\n        case div of\n            Nothing -\u003e return ()\n            Just dv -\u003e appendChild dv p\n    \n    setStyle :: Element -\u003e String -\u003e Fay ()\n    setStyle element = setAttribute element \"style\" \n    \n    -- Uses getElementByClassName, setAttribute etc.\n    example3 :: Fay ()\n    example3 = do\n        el \u003c- documentBody\n        run (f el) [createButton $ show x | x \u003c- [1 .. 5]]\n        --\n        btns \u003c- getElementsByClassName \"button-class\"\n        run (flip setStyle \"border:2px solid yellow\") btns\n    \n      where f :: Element -\u003e Fay Element -\u003e Fay ()\n          f par element = do\n              c \u003c- element \n              appendChild par c\n              setAttribute c \"class\" \"button-class\"\n          run :: (a -\u003e Fay ()) -\u003e [a] -\u003e Fay ()\n          run a = sequence_ . map a \n    \n    main :: Fay ()\n    main = do\n    onLoad $ do\n        example1\n        example2\n        example3\n    \n\nCompile the examples:\n\n    fay Examples.hs --html-wrapper\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaserpants%2Futil-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaserpants%2Futil-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaserpants%2Futil-dom/lists"}