---
name: "up.element"
area: "API"
kind: "module"
parent: "API reference"
url: "https://unpoly.com/api/up.element"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [API reference](https://unpoly.com/api.md)</nav>

# `up.element`

Low-level functions to access and change the DOM.

[`up.element.get()`](https://unpoly.com/api/up.element.get.md) and [`up.element.subtree()`](https://unpoly.com/api/up.element.subtree.md) look up elements. [`up.element.createFromHTML()`](https://unpoly.com/api/up.element.createFromHTML.md) and [`up.element.createFromSelector()`](https://unpoly.com/api/up.element.createFromSelector.md) build elements, and [`up.element.affix()`](https://unpoly.com/api/up.element.affix.md) builds one and attaches it to a parent. Functions like [`up.element.attr()`](https://unpoly.com/api/up.element.attr.md), [`up.element.numberAttr()`](https://unpoly.com/api/up.element.numberAttr.md) and [`up.element.jsonAttr()`](https://unpoly.com/api/up.element.jsonAttr.md) parse attribute values into typed values, and [`up.element.toggle()`](https://unpoly.com/api/up.element.toggle.md) or [`up.element.hide()`](https://unpoly.com/api/up.element.hide.md) change visibility through the [`[hidden]`](https://unpoly.com/api/hidden.md) attribute.

These functions know nothing about layers or animation. For a fragment-aware API, prefer [`up.fragment`](https://unpoly.com/api/up.fragment.md).

---

## Features {#features}

- ### [[hidden]](https://unpoly.com/api/hidden.md) (HTML attribute) (experimental)

  Elements with this attribute are hidden from the page.

- ### [up.element.affix(parent, [position], selector, [attrs])](https://unpoly.com/api/up.element.affix.md) (JavaScript function)

  Creates an element matching the given CSS selector and attaches it to the given parent element.

- ### [up.element.all([parent], selector)](https://unpoly.com/api/up.element.all.md) (JavaScript function) (deprecated)

  Returns all descendant elements matching the given selector.

- ### [up.element.attr(element, attribute)](https://unpoly.com/api/up.element.attr.md) (JavaScript function)

  Returns the given `attribute` value for the given `element`.

- ### [up.element.booleanAttr(element, attribute)](https://unpoly.com/api/up.element.booleanAttr.md) (JavaScript function)

  Returns the value of the given attribute on the given element, cast as a boolean value.

- ### [up.element.closest(element, selector)](https://unpoly.com/api/up.element.closest.md) (JavaScript function) (deprecated)

  Returns the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

- ### [up.element.createFromHTML(html)](https://unpoly.com/api/up.element.createFromHTML.md) (JavaScript function)

  Parses an element from the given HTML fragment string.

- ### [up.element.createFromSelector(selector, [attrs])](https://unpoly.com/api/up.element.createFromSelector.md) (JavaScript function)

  Creates an element matching the given CSS selector.

- ### [up.element.createNodesFromHTML(html)](https://unpoly.com/api/up.element.createNodesFromHTML.md) (JavaScript function) (experimental)

  Parses a list of nodes from a string of HTML.

- ### [up.element.first([parent], selector)](https://unpoly.com/api/up.element.first.md) (JavaScript function) (deprecated)

  Returns the first descendant element matching the given selector.

- ### [up.element.get([parent], value)](https://unpoly.com/api/up.element.get.md) (JavaScript function)

  Returns the native Element for the given value.

- ### [up.element.hide(element)](https://unpoly.com/api/up.element.hide.md) (JavaScript function)

  Hides the given element.

- ### [up.element.isAttached(element)](https://unpoly.com/api/up.element.isAttached.md) (JavaScript function) (deprecated)

  Returns whether the given element is attached to the DOM tree.

- ### [up.element.isDetached(element)](https://unpoly.com/api/up.element.isDetached.md) (JavaScript function) (deprecated)

  Returns whether the given element has been removed from the DOM tree.

- ### [up.element.isEmpty(element)](https://unpoly.com/api/up.element.isEmpty.md) (JavaScript function) (experimental)

  Returns whether the given element has no content.

- ### [up.element.isVisible(element)](https://unpoly.com/api/up.element.isVisible.md) (JavaScript function)

  Returns whether the given element is currently visible.

- ### [up.element.jsonAttr(element, attribute)](https://unpoly.com/api/up.element.jsonAttr.md) (JavaScript function)

  Reads the given attribute from the element, parsed as relaxed JSON.

- ### [up.element.matches(element, selector)](https://unpoly.com/api/up.element.matches.md) (JavaScript function) (deprecated)

  Returns whether the given element matches the given CSS selector.

- ### [up.element.numberAttr(element, attribute)](https://unpoly.com/api/up.element.numberAttr.md) (JavaScript function)

  Returns the value of the given attribute on the given element, cast to a number.

- ### [up.element.remove(element)](https://unpoly.com/api/up.element.remove.md) (JavaScript function) (deprecated)

  Removes the given element from the DOM tree.

- ### [up.element.replace(oldElement, newElement)](https://unpoly.com/api/up.element.replace.md) (JavaScript function) (deprecated)

  Replaces the given old element with the given new element.

- ### [up.element.setAttrs(element, attributes)](https://unpoly.com/api/up.element.setAttrs.md) (JavaScript function)

  Sets properties from the given object as attributes on the given element.

- ### [up.element.setStyle(element, styles)](https://unpoly.com/api/up.element.setStyle.md) (JavaScript function)

  Sets the given CSS properties as inline styles on the given element.

- ### [up.element.show(element)](https://unpoly.com/api/up.element.show.md) (JavaScript function)

  Shows the given element.

- ### [up.element.style(element, propOrProps)](https://unpoly.com/api/up.element.style.md) (JavaScript function)

  Returns computed CSS styles for the given element.

- ### [up.element.styleNumber(element, prop)](https://unpoly.com/api/up.element.styleNumber.md) (JavaScript function)

  Returns a computed CSS property value for the given element, cast as a number.

- ### [up.element.subtree(root, selector)](https://unpoly.com/api/up.element.subtree.md) (JavaScript function)

  Returns a list of a `root` element's descendants matching the given selector.

- ### [up.element.toggle(element, [newVisible])](https://unpoly.com/api/up.element.toggle.md) (JavaScript function)

  Changes whether the given element is shown or hidden.

- ### [up.element.toggleClass(element, className, [newPresent])](https://unpoly.com/api/up.element.toggleClass.md) (JavaScript function) (deprecated)

  Adds or removes the given class from the given element.

- ### [up.element.toSelector(element)](https://unpoly.com/api/up.element.toSelector.md) (JavaScript function) (deprecated)

  Returns a CSS selector that matches the given element as good as possible.