Try Install Learn Blog API Packages GitHub
Pages

Dom

Functions for working with the DOM.

Functions

containedInSelector
(
selector
:
String
element
:
Dom.Element
)
:
Bool

Returns if the given element is in an element that matches the given selector.

Dom.containedInSelector("body", Dom.getElementBySelector("div"))
contains
(
element
:
Dom.Element
base
:
Dom.Element
)
:
Bool

Returns if the given base element contains the given element.

body =
  Dom.getElementBySelector("body")

div =
  Dom.getElementBySelector("div")

Dom.contains(div, body) == true
createElement
(
tag
:
String
)
:
Dom.Element

Creates a new Dom.Element with the given tag.

Dom.createElement("div")
focus
(
maybeElement
:
Maybe(Dom.Element)
)
:
Promise(Never, Void)

Tries to focus the given element (if exists) in the next 150 milliseconds. Fails silently if there is no element or if the element cannot be focused.

"my-id"
|> Dom.focus
|> Dom.getElementById()
focusWhenVisible
(
element
:
Dom.Element
)
:
Promise(String, Void)

Tries to focus the given element in the next 150 milliseconds.

"my-div"
|> Dom.getElementById
|> Dom.focusWhenVisible()
getAttribute
(
name
:
String
element
:
Dom.Element
)
:
String

Returns the content of the given attribute of the given element.

"my-div"
|> Dom.getElementById()
|> Dom.getAttribute("id") == "my-div"
getDimensions
(
dom
:
Dom.Element
)
:
Dom.Dimensions

Returns the dimensions (BoundingClientRect) of a Dom.Element

Dom.getDimensions(Dom.createElement("div")) = {
  bottom = 0,
  height = 0,
  width = 0,
  right = 0,
  left = 0,
  top = 0,
  x = 0,
  y = 0
}
getElementById
(
id
:
String
)
:
Maybe(Dom.Element)

Gets the element with the given id from anywhere in the page.

Dom.getElementById("my-div")
getElementBySelector
(
selector
:
String
)
:
Maybe(Dom.Element)

Gets the element with the given id from anywhere in the page.

Dom.getElementById("body section > p:first-child")
getElementFromPoint
(
left
:
Number
top
:
Number
)
:
Maybe(Dom.Element)

Gets the element from a point on the screen.

Dom.getElementFromPoint(0, 0)
getValue
(
dom
:
Dom.Element
)
:
String

Gets the value as string form a Dom.Element.

If the element supports value it will return it, otherwise it returns an empty string.

Dom.getValue("input[value=hello]") == "hello"
Dom.getValue("div") == ""
matches
(
selector
:
String
dom
:
Dom.Element
)
:
Bool

Returns whether or not the given Dom.Element matches the given selector.

Dom.matches("div", Dom.createElement("div")) == true
Dom.matches("p", Dom.createElement("div")) == false
setStyle
(
name
:
String
value
:
String
element
:
Dom.Element
)
:
Dom.Element

Sets the given style to the given value of the given element.

"my-div"
|> Dom.getElementById()
|> Dom.setStyle("background", "red")
|> Dom.setStyle("color", "white")
setValue
(
value
:
String
dom
:
Dom.Element
)
:
Dom.Element

Sets the value property of a Dom.Element.

It is used to set the value of input fields programatically.