Try Install Learn Blog API Packages GitHub
Pages
Standard Library

Search
Entities

Dom

Functions

blurActiveElement
:
Promise(Never, Void)

Blurs the active element of the page.

Dom.blurActiveElement()
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.

Dom.contains(div, body) == true
containsMaybe
(
maybeElement
:
Maybe(Dom.Element)
base
:
Dom.Element
)
:
Bool

Returns if the given base element contains the given element (as a maybe).

case (Dom.getElementBySelector("body")) {
  Maybe::Just(body) =>
    try {
      div =
        Dom.getElementBySelector("div")

      Dom.contains(div, body) == true
    }

  => false
}
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()
focusFirst
(
element
:
Dom.Element
)
:
Promise(Never, Void)

Focuses the first focusable descendant of the given element.

focusWhenVisible
(
element
:
Dom.Element
)
:
Promise(String, Void)

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

"my-div"
|> Dom.getElementById
|> Dom.focusWhenVisible()
getActiveElement
:
Maybe(Dom.Element)

Returns the active (focused) element of the page.

Dom.getActiveElement() == Dom.getElementBySelector("body")
getAttribute
(
name
:
String
element
:
Dom.Element
)
:
Maybe(String)

If the attribute is present, it will return its value on the given element.

try {
	outcome =
  	Dom.getElementById("my-div")

  case (outcome) {
    Maybe::Just(element) => Dom.getAttribute("id", element) == "my-div"
    Maybe::Nothing => false
  }
}
getChildren
(
element
:
Dom.Element
)
:
Array(Dom.Element)

Returns all child elements of the given element.

Dom.getChildren())
getClientHeight
(
element
:
Dom.Element
)
:
Number

Returns the clientHeight of the given element.

Dom.getClientHeight(div) == 200
getClientWidth
(
element
:
Dom.Element
)
:
Number

Returns the clientWidth of the given element.

Dom.getClientWidth(div) == 200
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 first element to match the given selector from anywhere in the page.

Dom.getElementBySelector("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)
getElementsBySelector
(
selector
:
String
element
:
Dom.Element
)
:
Array(Dom.Element)

Gets all descendant elements of an element which are matching the given selector.

Dom.getElementsBySelector("a[name]", element)
getFocusableElements
(
element
:
Dom.Element
)
:
Array(Dom.Element)

Returns all focusable descendant elements.

getScrollHeight
(
element
:
Dom.Element
)
:
Number

Returns the scrollable height of the given element.

Dom.getScrollHeight(div) == 0
getScrollLeft
(
element
:
Dom.Element
)
:
Number

Returns the horizontal scroll position of the given element.

Dom.getScrollLeft(div) == 0
getScrollTop
(
element
:
Dom.Element
)
:
Number

Returns the vertical scroll position of the given element.

Dom.getScrollTop(div) == 0
getScrollWidth
(
element
:
Dom.Element
)
:
Number

Returns the scrollable width of the given element.

Dom.getScrollWidth(div) == 300
getTableOfContents
(
selector
:
String
element
:
Dom.Element
)
:
Array(Tuple(String, String, String))

Returns the table of contents of the given element for the given selectors.

Dom.getTableOfContents("h1, h2, h3, h4", element) == [
  {"h1", "The title of the page", "the-title-of-the-page"},
  {"h2", "A subtitle of the page", "a-subtitle-of-the-page"},
  {"h3", "A sub-subtitle of the page", "a-sub-subtitle-of-the-page"}
]
getTagName
(
element
:
Dom.Element
)
:
String

Returns the tagname of the given element.

("body"
|> Dom.getElementBySelector("body")
|> Dom.getTagName) == "BODY"
getTextContent
(
element
:
Dom.Element
)
:
String

Returns the text content of the given element.

Dom.getTextContent(Dom.getElementBySelector("body"))
getTextWidth
(
font
:
String
text
:
String
)
:
Number

Measures the given text width with the given font using the canvas.

Dom.getTextWidth("20px sans-serif", "Hello There") = 300
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
scrollTo
(
element
:
Dom.Element
left
:
Number
top
:
Number
)
:
Promise(Never, Void)

Scrolls the given element to the given position.

Dom.scrollTo(element, 10, 10)
setAttribute
(
attribute
:
String
value
:
String
element
:
Dom.Element
)
:
Dom.Element

Sets the given attribute to the given value of the given element and returns the element.

"a"
|> Dom.createElement
|> Dom.setAttribute("name", "test")
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 programmatically.

smoothScrollTo
(
element
:
Dom.Element
left
:
Number
top
:
Number
)
:
Promise(Never, Void)

Smooth scroll the given element to the given position.

Dom.smoothScrollTo(element, 10, 10)