Dom.Element

This module contains functions for constructing, modifying, and rendering Dom.Element records.

By using a record to temporarily store data about a node, we can partially construct that node with some data, but delay building it until all of the data has been assembled. In this way, all of a node's data is available to be modified until it is either placed in a container element or passed as an argument to the Dom.Element.toNode function.

The rendering function wraps up the data collected in the element record as arguments to VirtualDom.node. There is minimal overhead with this approach, but where performance or memory use is of particular concern, it will be better to construct nodes directly with the functions in module Dom.Node, or by using the standard elm-lang/html and elm-lang/svg packages.

Constructors

leaf : String -> Element msg

Construct a leaf element (an element without children), with the tag given as a string argument

Dom.Element.leaf "hr"

textWrapper : String -> String -> Element msg

Construct an element that wraps text; the first argument gives the tag, and the second argument gives the internal text

"Hello World!"
  |> Dom.Element.textWrapper "p"

container : String -> List (Element msg) -> Element msg

Construct an element that contains other elements; the first argument gives the tag, and the second argument gives a list of child elements

[ "Hello World!"
  |> Dom.Element.textWrapper "p"
]
  |> Dom.Element.container "div"

wrapNodes : String -> List (Node msg) -> Element msg

Wrap a list of native VirtualDom nodes in a container element; the first argument gives the tag, and the second argument gives a list of child nodes

[ "Hello World!"
  |> Dom.Node.textWrapper "p" []
]
  |> Dom.Element.wrapNodes "div"

Rendering

toNode : Element msg -> Node msg

Generate a VirtualDom.Node from a Dom.Type.Element record

[ "Hello World!"
  |> Dom.Element.textWrapper "p"
]
  |> Dom.Element.container "div"
  |> Dom.Element.toNode

Classes

withClasses : List String -> Element msg -> Element msg

Update an element's classes, replacing any existing classes; classes are combined into a single className property when the rendering function is called

myElement =
  [ "Hello World!"
    |> Dom.Element.textWrapper "p"
    |> Dom.Element.withClasses
      [ "size-large"
      , "weight-bold"
      ]
  ]
    |> Dom.Element.container "div"

addClass : String -> Element msg -> Element msg

Add a new class to the existing classes of an element

myElement
  |> Dom.Element.addClass "bordered-box"

removeClass : String -> Element msg -> Element msg

Remove a particular class from an element, retaining other assigned classes

myElement
  |> Dom.Element.removeClass "bordered-box"

Attributes

withAttributes : List (Property msg) -> Element msg -> Element msg

Update an element's attributes, replacing any existing attributes

(You get the pattern by this point...)

addAttribute : Property msg -> Element msg -> Element msg

Add a new attribute to the existing attributes of an element

Text

withText : String -> Element msg -> Element msg

Update an element's text, replacing any existing text

appendText : String -> Element msg -> Element msg

Append new text to an element, after any existing text

prependText : String -> Element msg -> Element msg

Prepend new text to an element, before any existing text

Children

withChildren : List (Element msg) -> Element msg -> Element msg

Update an element's children, replacing any existing children

appendChild : Element msg -> Element msg -> Element msg

Append a new child to an element, after any existing children

prependChild : Element msg -> Element msg -> Element msg

Prepend a new child to an element, before any existing children

withChildNodes : List (Node msg) -> Element msg -> Element msg

Update an element's children, with a list of native VirtualDom nodes given as the first argument in place of a list of element records

Namespace

setNamespace : String -> Element msg -> Element msg

Set an element's XML namespace

Queries

hasChildren : Element msg -> Bool

Returns True if the element has children

hasText : Element msg -> Bool

Returns True if the element has text

hasClass : String -> Element msg -> Bool

Returns True if the element's class list contains the name given in the first argument

danielnarey/elm-semantic-dom/1.0.0