Try Install Learn Blog API Packages GitHub
Pages
core

Search
Entities

Dom

Functions

blurActiveElement
:
Promise(Void)

Blurs the active element of the page.

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

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

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

Returns if the given base element contains the given element.

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

Creates a new Dom.Element with the given tag.

Dom.createElement("div")
focus
(
maybeElement
:
Maybe(Dom.Element)
)
:
Promise(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(Void)

Focuses the first focusable descendant of the given element.

focusWhenVisible
(
element
:
Dom.Element
)
:
Promise(Result(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
(
element
:
Dom.Element
name
:
String
)
:
Maybe(String)

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

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

case (outcome) {
  Maybe::Just(element) => Dom.getAttribute(element, "id") == "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
(
element
:
Dom.Element
selector
:
String
)
:
Array(Dom.Element)

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

Dom.getElementsBySelector(element, "a[name]")
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
(
element
:
Dom.Element
selector
:
String
)
:
Array(Tuple(String, String, String))

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

Dom.getTableOfContents(element, "h1, h2, h3, h4") == [
  {"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
(
text
:
String
font
:
String
)
:
Number

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

Dom.getTextWidth("Hello There", "20px sans-serif") = 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
(
dom
:
Dom.Element
selector
:
String
)
:
Bool

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

Dom.matches(Dom.createElement("div"), "div") == true
Dom.matches(Dom.createElement("div"), "p") == false
scrollTo
(
element
:
Dom.Element
left
:
Number
top
:
Number
)
:
Promise(Void)

Scrolls the given element to the given position.

Dom.scrollTo(element, 10, 10)
setAttribute
(
element
:
Dom.Element
attribute
:
String
value
:
String
)
:
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
(
element
:
Dom.Element
name
:
String
value
:
String
)
:
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
(
dom
:
Dom.Element
value
:
String
)
:
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(Void)

Smooth scroll the given element to the given position.

Dom.smoothScrollTo(element, 10, 10)