@Operator
virtual This add(Elem child)

Add a new element as a child to this element. Return this.

This addAll(Elem[] elems)

Add all elements to this element. Returns this.

Void animateStart(KeyFrames frames, [Str:Obj]? opts, Duration dur)

Start an animation on this element using the given key frames.

frames := KeyFrames([
  KeyFrame("0%",   ["transform": "scale(1)"]),
  KeyFrame("50%",  ["transform": "scale(1.1)"]),
  KeyFrame("100%", ["transform": "scale(1)"]),
])

animate(frames, null, 5sec)
animate(frames, ["animation-iteration-count":"infinite"], 1sec)

Void animateStop()

Stop the current animation on this element, or do nothing if no animation in progress.

Str? attr(Str name)

Get the given HTML attribute value for this element. Returns null if attribute not defined.

Str:Str attrs()

Get name:value map of all attributes.

virtual Void blur()

Remove focus from this elem.

Elem[] children()

Get the child nodes of this element.

Elem clone(Bool deep := true)

Return a duplicate of this node.

Elem? closest(Str selectors)

Traverses this element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector. Returns null if none found.

Bool containsChild(Elem elem)

Return true if given element is a descendant of this node, or false if not.

virtual Bool? enabled

The enabled attribute for this element, or null if one not applicable. This is typically only valid for form elements.

Elem? firstChild()

Get the first child node of this element, or null if this element has no children.

virtual Void focus()

Request keyboard focus on this elem.

static Elem fromHtml(Str html)

Create an Elem instance from a HTML string. This is equivlaent

elem := Elem { it.html=html }.firstChild

static Elem fromNative(Obj elem, Type type := dom::Elem#)

Create an Elem instance from a native JavaScript DOM object. The type may be specified to create a subclass instance of Elem. Note if the native instance has already been mapped to Fantom, the existing instance is returned and type will have no effect.

@Operator
Obj? get(Str name)

Convenience for attr.

Bool hasChildren()

Return true if children is non-zero, false otherwise.

virtual Bool hasFocus()

Return true if this elem has focus.

Str html

The HTML markup contained in this element.

Str? id

The id for this element. Returns null if id is not defined.

virtual This insertBefore(Elem child, Elem ref)

Insert a new element as a child to this element before the specified reference element. The reference element must be a child of this element. Returns this.

Obj? invoke(Str name, Obj?[]? args := null)

Invoke the given native DOM function with optional arguments.

Elem? lastChild()

Get the last child node of this element, or null if this element has no children.

new make(Str tagName := "div", Uri? ns := null)

Create a new Elem in the current Doc. Optionally a namespace can be specified with ns.

Elem? nextSibling()

Get the next sibling to this element, or null if this is the last element under its parent.

Uri ns()

The namespace URI of this element.

Func onEvent(Str type, Bool useCapture, |Event| handler)

Attach an event handler for the given event on this element. Returns callback function instance.

Point pagePos()

Position of element relative to the whole document.

Elem? parent()

Get the parent Elem of this element, or null if this element has no parent.

Point pos

Position of element relative to its parent in pixels.

Elem? prevSibling()

Get the previous sibling to this element, or null if this is the first element under its parent.

Obj? prop(Str name)

Get the given DOM property value for this element. Returns null if property does not exist.

Elem? querySelector(Str selectors)

Returns the first element that is a descendant of this element on which it is invoked that matches the specified group of selectors.

Elem[] querySelectorAll(Str selectors)

Returns a list of all elements descended from this element on which it is invoked that match the specified group of CSS selectors.

Point relPos(Point p)

Given a page position, return p relative to this element.

virtual This remove(Elem child)

Remove a child element from this element. Return this.

This removeAll()

Remove all children from this element. Returns this.

This removeAttr(Str name)

Remove the given HTML attribute from this element.

Void removeEvent(Str type, Bool useCapture, Func handler)

Remove the given event handler from this element. If this handler was not registered, this method does nothing.

Void renderCanvas(|Graphics| f)

Paint a <canvas> element. The given callback is invoked with a graphics context to perform the rendering operation.

virtual This replace(Elem oldChild, Elem newChild)

Replace existing child node with a new child. Returns this.

This scrollIntoView(Bool alignToTop := true)

Scroll parent container so this Elem is visible to user. If alignToTop is true (the default value), the top of Elem is aligned to top of the visible area. If false, the bottom of Elem is aligned to bottom of the visible area.

Point scrollPos

Top left scroll position of element.

Size scrollSize()

Scrollable size of element.

@Operator
Void set(Str name, Str? val)

Conveneince for setAttr.

This setAttr(Str name, Str? val, Uri? ns := null)

Set the given HTML attribute value for this element. If val is null the attribute is removed (see removeAttr). Optionally a namespace can be specified with ns.

This setProp(Str name, Obj? val)

Set the given DOM properity value for this element.

Size size

Size of element in pixels.

Style style()

Get the Style instance for this element.

Str tagName()

Get the tag name for this element.

Str text

Text content contained in this element.

Void transition(Str:Obj props, [Str:Obj]? opts, Duration dur, |Elem|? onComplete := null)

Transition a set of CSS properties.

transition(["opacity": "0.5"], null, 1sec) { echo("done!") }
transition(["opacity": "0.5"], ["transition-delay": 500ms], 1sec) { echo("done!") }

virtual override Obj? trap(Str name, Obj?[]? args := null)

The trap operator will behave slightly differently based on the namespace of the element.

For HTML elements, trap works as a convenience for prop and setProp:

div := Elem("div")
div->tabIndex = 0   // equivalent to div.setProp("tabIndex", 0)

For SVG elements (where ns is `http://www.w3.org/2000/svg`), trap routes to attr and setAttr:

svg := Svg.line(0, 0, 10, 10)
svg->x1 = 5      // equivalent to svg.setAttr("x1", "5")
svg->y1 = 5      // equivalent to svg.setAttr("y1", "5")
svg->x2 == "10"  // equivalent to svg.attr("x2")