Edit this page

API DOM helpers
module up.element

The up.element module offers functions for DOM manipulation and traversal.

It complements native Element methods and works across all supported browsers.

Differences to up.fragment

up.element is a low-level API to work with DOM elements directly. Unpoly also a higher-level API in up.fragment:

  • By default up.fragment functions will only see elements from the current layer. up.element is not aware of layers and always sees the entire DOM.
  • up.fragment functions will ignore elements that are being destroyed, but are still finishing an exit animation (e.g. fading out).
  • Functions in up.fragment support non-standard CSS extensions like :main or :layer. Functions in up.element only understands the CSS selectors supported by the current browser.

All features

HTML
[hidden] experimental

Elements with this attribute are hidden from the page.

JS
up.element.affix(parent, [position], selector, [attrs]) stable

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

JS
up.element.all([parent], selector) deprecated

Returns all descendant elements matching the given selector.

JS
up.element.attr() stable

Returns the given attribute value for the given element.

JS
up.element.booleanAttr(element, attribute) stable

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

JS
up.element.closest(element, selector) deprecated

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

JS
up.element.createFromHTML(html) stable

Creates an element from the given HTML fragment string.

JS
up.element.createFromSelector(selector, [attrs]) stable

Creates an element matching the given CSS selector.

JS
up.element.first([parent], selector) deprecated

Returns the first descendant element matching the given selector.

JS
up.element.get([parent], value) stable

Returns the native Element for the given value.

JS
up.element.hide(element) stable

Hides the given element.

JS
up.element.isAttached(element) deprecated

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

JS
up.element.isDetached(element) deprecated

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

JS
up.element.isEmpty(element) experimental

Returns whether the given element has no content.

JS
up.element.isVisible(element) stable

Returns whether the given element is currently visible.

JS
up.element.jsonAttr(element, attribute) stable

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

JS
up.element.matches(element, selector) deprecated

Returns whether the given element matches the given CSS selector.

JS
up.element.numberAttr(element, attribute) stable

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

JS
up.element.remove(element) deprecated

Removes the given element from the DOM tree.

JS
up.element.replace(oldElement, newElement) deprecated

Replaces the given old element with the given new element.

JS
up.element.setAttrs(element, attributes) stable

Sets all key/values from the given object as attributes on the given element.

JS
up.element.setStyle(element, props) stable

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

JS
up.element.show(element) stable

Shows the given element.

JS
up.element.style(element, propOrProps) stable

Receives computed CSS styles for the given element.

JS
up.element.styleNumber(element, prop) stable

Receives a computed CSS property value for the given element, casted as a number.

JS
up.element.subtree(parent, selector) stable

Returns a list of the given parent's descendants matching the given selector. The list will also include the parent element if it matches the selector itself.

JS
up.element.toggle(element, [newVisible]) stable

Changes whether the given element is shown or hidden.

JS
up.element.toggleClass(element, className, [newPresent]) deprecated

Adds or removes the given class from the given element.

JS
up.element.toSelector({string|Element|jQuery}) deprecated

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