Elem
@Js
class Elem : Obj
Elem models a DOM element object.
See pod doc for details.
Create a new Elem in the current Doc
Top left scroll position of element
Size of element in pixels
Position of element relative to its parent in pixels
The HTML markup contained in this element
The id for this element
Text content contained in this element
The enabled attribute for this element, or null if one not applicable
Get the parent Elem of this element, or null if this element has no parent
The namespace URI of this element
Return true if children is non-zero, false otherwise
Returns a list of all elements descended from this element on which it is invoked that match the specified group of CSS selectors
Replace existing child node with a new child
Remove focus from this elem
Request keyboard focus on this elem
Invoke the given native DOM function with optional arguments
Get the next sibling to this element, or null if this is the last element under its parent
Stop the current animation on this element, or do nothing if no animation in progress
Remove a child element from this element
Insert a new element as a child to this element before the specified reference element
Remove all children from this element
Paint a <canvas> element
Get the child nodes of this element
Scroll parent container so this Elem is visible to user
Get the first child node of this element, or null if this element has no children
Get the last child node of this element, or null if this element has no children
Convenience for attr
Get the given DOM property value for this element
The trap operator will behave slightly differently based on the namespace of the element
Start an animation on this element using the given key frames
Get the given HTML attribute value for this element
Return true if this elem has focus
Scrollable size of element
Position of element relative to the whole document
Add a new element as a child to this element
Conveneince for setAttr
Remove the given event handler from this element
Remove the given HTML attribute from this element
Returns the first element that is a descendant of this element on which it is invoked that matches the specified group of selectors
Set the given DOM properity value for this element
Create an Elem instance from a native JavaScript DOM object
Get the tag name for this element
Return true if given element is a descendant of this node, or false if not
Transition a set of CSS properties
Get name:value map of all attributes
Given a page position, return p relative to this element
Add all elements to this element
Attach an event handler for the given event on this element
Return a duplicate of this node
Get the previous sibling to this element, or null if this is the first element under its parent
Get the Style instance for this element
Set the given HTML attribute value for this element
Traverses this element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector
Create an Elem instance from a HTML string
@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)
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
@Js
static Elem fromNative(Obj elem, Type type)
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)
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, Uri? ns)
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. Before calling this code, you should set the canvas width/height attributes to match the element size (typically as a ratio of the Win.devicePixelRatio).
virtual This replace(Elem oldChild, Elem newChild)
Replace existing child node with a new child. Returns this.
This scrollIntoView(Bool alignToTop)
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)
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)
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 Obj? trap(Str name, Obj?[]? args)
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")