Dom

Blurs the active element of the page.

Dom.blurActiveElement()

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

Dom.containedInSelector(Dom.getElementBySelector("div"), "body")

Returns if the given base element contains the given element.

Dom.contains(body, div) == true

Creates a new Dom.Element with the given tag.

Dom.createElement("div")

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()

Focuses the first focusable descendant of the given element.

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

"my-div"
|> Dom.getElementById
|> Dom.focusWhenVisible()

Returns the active (focused) element of the page.

Dom.getActiveElement() == Dom.getElementBySelector("body")

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
}

Returns all child elements of the given element.

Dom.getChildren())

Returns the clientHeight of the given element.

Dom.getClientHeight(div) == 200

Returns the clientWidth of the given element.

Dom.getClientWidth(div) == 200

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
}

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

Dom.getElementById("my-div")

Gets the first element to match the given selector from anywhere in the page.

Dom.getElementBySelector("body section > p:first-child")

Gets the element from a point on the screen.

Dom.getElementFromPoint(0, 0)

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

Dom.getElementsBySelector(element, "a[name]")

Returns all focusable descendant elements.

Returns the scrollable height of the given element.

Dom.getScrollHeight(div) == 0

Returns the horizontal scroll position of the given element.

Dom.getScrollLeft(div) == 0

Returns the vertical scroll position of the given element.

Dom.getScrollTop(div) == 0

Returns the scrollable width of the given element.

Dom.getScrollWidth(div) == 300

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"}
]

Returns the tagname of the given element.

("body"
|> Dom.getElementBySelector("body")
|> Dom.getTagName) == "BODY"

Returns the text content of the given element.

Dom.getTextContent(Dom.getElementBySelector("body"))

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

Dom.getTextWidth("Hello There", "20px sans-serif") = 300

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") == ""

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

Scrolls the given element to the given position.

Dom.scrollTo(element, 10, 10)

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

"a"
|> Dom.createElement
|> Dom.setAttribute("name", "test")

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

"my-div"
|> Dom.getElementById()
|> Dom.setStyle("background", "red")
|> Dom.setStyle("color", "white")

Sets the value property of a Dom.Element.

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

Smooth scroll the given element to the given position.

Dom.smoothScrollTo(element, 10, 10)