Package com.vaadin.flow.dom

Class Element

java.lang.Object
com.vaadin.flow.dom.Node<Element>
com.vaadin.flow.dom.Element
All Implemented Interfaces:
Serializable
public class Element extends Node<Element>
Represents an element in the DOM.

Contains methods for updating and querying various parts of the element, such as attributes.

Since:
1.0
Author:
Vaadin Ltd
See Also:

  • Constructor Details

    • Element

      protected Element(StateNode node, ElementStateProvider stateProvider)
      Private constructor for initializing with an existing node and state provider.
      Parameters:
      node - the state node, not null
      stateProvider - the state provider, not null

    • Element

      public Element(String tag)
      Creates an element using the given tag name.
      Parameters:
      tag - the tag name of the element. Must be a non-empty string and can contain letters, numbers and dashes (-)

  • Method Details

    • get

      public static Element get(StateNode node)
      Gets the element mapped to the given state node.
      Parameters:
      node - the state node, not null
      Returns:
      the element for the node, not null

    • get

      public static Element get(StateNode node, ElementStateProvider stateProvider)
      Gets the element mapped to the given state node and element state provider.
      Parameters:
      node - the state node
      stateProvider - the element state provider
      Returns:
      an element for the node and state provider, not null

    • getChildCount

      public int getChildCount()
      Gets the number of child elements.

      If the property "innerHTML" has been set explicitly then its value (the new element structure) won't be populated on the server side and this method will return 0.

      Overrides:
      getChildCount in class Node<Element>
      Returns:
      the number of child elements
      See Also:

    • getChild

      public Element getChild(int index)
      Returns the child element at the given position.

      If property "innerHTML" has been set explicitly then its value (the new element structure) won't be populated on the server side and this method will not work.

      Overrides:
      getChild in class Node<Element>
      Parameters:
      index - the index of the child element to return
      Returns:
      the child element
      See Also:

    • getChildren

      public Stream<Element> getChildren()
      Gets all the children of this element.

      If property "innerHTML" has been set explicitly then its value (the new element structure) won't be populated on the server side and this method returns an empty stream.

      Overrides:
      getChildren in class Node<Element>
      Returns:
      a stream of children
      See Also:

    • createText

      public static Element createText(String text)
      Creates a text node with the given text.
      Parameters:
      text - the text in the node, null is interpreted as an empty string
      Returns:
      an element representing the text node, never null

    • getTag

      public String getTag()
      Gets the tag name for the element.
      Returns:
      the tag name

    • setAttribute

      public Element setAttribute(String attribute, String value)
      Sets the given attribute to the given value.

      Attribute names are considered case insensitive and all names will be converted to lower case automatically.

      An attribute always has a String key and a String value.

      Note: An empty attribute value ("") will be rendered as <div something> and not <div something="">.

      Note that setting the attribute class will override anything that has been set previously via getClassList().

      Note that you cannot set the attribute style using this method. Instead you should use getStyle() object.

      Note that attribute changes made on the server are sent to the client but attribute changes made on the client side are not reflected back to the server.

      Parameters:
      attribute - the name of the attribute
      value - the value of the attribute, not null
      Returns:
      this element

    • setAttribute

      public Element setAttribute(String attribute, boolean value)
      Sets the given attribute to the given boolean value. Setting the value to true will internally set the value to "", which will be rendered as <div name>, i.e. without any explicit value. Setting the value to false is a shorthand for removing the attribute.

      Use hasAttribute(String) to check whether a boolean attribute has been set.

      Attribute names are considered case insensitive and all names will be converted to lower case automatically.

      Parameters:
      attribute - the name of the attribute
      value - the value of the attribute
      Returns:
      this element
      See Also:

    • setAttribute

      public Element setAttribute(String attribute, AbstractStreamResource resource)
      Sets the given attribute to the given StreamResource value.

      Attribute names are considered case insensitive and all names will be converted to lower case automatically.

      This is a convenience method to register a StreamResource instance into the session and use the registered resource URI as an element attribute.

      Parameters:
      attribute - the name of the attribute
      resource - the resource value, not null
      Returns:
      this element
      See Also:

    • getAttribute

      public String getAttribute(String attribute)
      Gets the value of the given attribute.

      Attribute names are considered case insensitive and all names will be converted to lower case automatically.

      An attribute always has a String key and a String value.

      Note that for attribute class the contents of the getClassList() collection are returned as a single concatenated string.

      Note that for attribute style the contents of the getStyle() object are returned as a single concatenated string.

      Note that attribute changes made on the server are sent to the client but attribute changes made on the client side are not reflected back to the server.

      Parameters:
      attribute - the name of the attribute
      Returns:
      the value of the attribute or null if the attribute has not been set

    • hasAttribute

      public boolean hasAttribute(String attribute)
      Checks if the given attribute has been set.

      Attribute names are considered case insensitive and all names will be converted to lower case automatically.

      Note that attribute changes made on the server are sent to the client but attribute changes made on the client side are not reflected back to the server.

      Parameters:
      attribute - the name of the attribute
      Returns:
      true if the attribute has been set, false otherwise

    • getAttributeNames

      public Stream<String> getAttributeNames()
      Gets the defined attribute names.

      Attribute names are considered case insensitive and all names will be converted to lower case automatically.

      Note that attribute changes made on the server are sent to the client but attribute changes made on the client side are not reflected back to the server.

      Returns:
      a stream of defined attribute names

    • removeAttribute

      public Element removeAttribute(String attribute)
      Removes the given attribute.

      Attribute names are considered case insensitive and all names will be converted to lower case automatically.

      If the attribute has not been set, does nothing.

      Note that attribute changes made on the server are sent to the client but attribute changes made on the client side are not reflected back to the server.

      Parameters:
      attribute - the name of the attribute
      Returns:
      this element

    • addEventListener

      public DomListenerRegistration addEventListener(String eventType, DomEventListener listener)
      Adds an event listener for the given event type.

      Event listeners are triggered in the order they are registered.

      Parameters:
      eventType - the type of event to listen to, not null
      listener - the listener to add, not null
      Returns:
      a handle that can be used for configuring or removing the listener
      See Also:

    • removeFromParent

      public Element removeFromParent()
      Removes this element from its parent.

      Has no effect if the element does not have a parent

      Returns:
      this element

    • removeFromTree

      public Element removeFromTree()
      Removes this element from its parent and state tree.
      Returns:
      this element

    • getParent

      public Element getParent()
      Gets the parent element.

      The method may return null if the parent is not an element but a Node.

      Returns:
      the parent element or null if this element does not have a parent or the parent is not an element
      See Also:

    • setProperty

      public Element setProperty(String name, String value)
      Sets the given property to the given string value.

      Note in order to update the following properties, you need to use the specific API for that:

      Properties with different API
      Property Method
      classList / className getClassList()
      style getStyle()
      textContent getText() and getTextRecursively()

      Note that properties changed on the server are updated on the client but changes made on the client side are not reflected back to the server unless configured using addPropertyChangeListener(String, String, PropertyChangeListener) or DomListenerRegistration.synchronizeProperty(String).

      The "innerHTML" property has an impact on the descendants structure of the element. So setting the "innerHTML" property removes all the children.

      Parameters:
      name - the property name, not null
      value - the property value
      Returns:
      this element

    • setProperty

      public Element setProperty(String name, boolean value)
      Sets the given property to the given boolean value.

      Note that properties changed on the server are updated on the client but changes made on the client side are not reflected back to the server unless configured using addPropertyChangeListener(String, String, PropertyChangeListener) or DomListenerRegistration.synchronizeProperty(String).

      Parameters:
      name - the property name, not null
      value - the property value
      Returns:
      this element

    • setProperty

      public Element setProperty(String name, double value)
      Sets the given property to the given numeric value.

      Note that properties changed on the server are updated on the client but changes made on the client side are not reflected back to the server unless configured using addPropertyChangeListener(String, String, PropertyChangeListener) or DomListenerRegistration.synchronizeProperty(String).

      Parameters:
      name - the property name, not null
      value - the property value
      Returns:
      this element

    • setPropertyJson

      public Element setPropertyJson(String name, elemental.json.JsonValue value)
      Sets the given property to the given JSON value.

      Please note that this method does not accept null as a value, since Json.createNull() should be used instead for JSON values.

      Note that properties changed on the server are updated on the client but changes made on the client side are not reflected back to the server unless configured using addPropertyChangeListener(String, String, PropertyChangeListener) or DomListenerRegistration.synchronizeProperty(String).

      Parameters:
      name - the property name, not null
      value - the property value, not null
      Returns:
      this element

    • setPropertyBean

      public Element setPropertyBean(String name, Object value)
      Sets the given property to the given bean, converted to a JSON object.

      Note that properties changed on the server are updated on the client but changes made on the client side are not reflected back to the server unless configured using addPropertyChangeListener(String, String, PropertyChangeListener) or DomListenerRegistration.synchronizeProperty(String).

      Parameters:
      name - the property name, not null
      value - the property value, not null
      Returns:
      this element

    • setPropertyList

      public <T> Element setPropertyList(String name, List<T> value)
      Sets the given property to the given list of beans or primitive values, converted to a JSON array.

      Note that properties changed on the server are updated on the client but changes made on the client side are not reflected back to the server unless configured using addPropertyChangeListener(String, String, PropertyChangeListener) or DomListenerRegistration.synchronizeProperty(String).

      Type Parameters:
      T - the type of items in the list
      Parameters:
      name - the property name, not null
      value - the property value, not null
      Returns:
      this element

    • setPropertyMap

      public Element setPropertyMap(String name, Map<String,?> value)
      Sets the given property to the given map of beans or primitive values, converted to a JSON object.

      Note that properties changed on the server are updated on the client but changes made on the client side are not reflected back to the server unless configured using addPropertyChangeListener(String, String, PropertyChangeListener) or DomListenerRegistration.synchronizeProperty(String).

      Parameters:
      name - the property name, not null
      value - the property value, not null
      Returns:
      this element

    • addPropertyChangeListener

      public Registration addPropertyChangeListener(String name, PropertyChangeListener listener)
      Adds a property change listener which is triggered when the property's value is updated on the server side.

      Note that properties changed on the server are updated on the client but changes made on the client side are not reflected back to the server unless configured using addPropertyChangeListener(String, String, PropertyChangeListener) or DomListenerRegistration.synchronizeProperty(String).

      Parameters:
      name - the property name to add the listener for, not null
      listener - listener to get notifications about property value changes, not null
      Returns:
      an event registration handle for removing the listener
      See Also:

    • addPropertyChangeListener

      public DomListenerRegistration addPropertyChangeListener(String propertyName, String domEventName, PropertyChangeListener listener)
      Adds a property change listener and configures the property to be synchronized to the server when a given DOM event is fired. #see addPropertyChangeListener(String, PropertyChangeListener)
      Parameters:
      propertyName - the name of the element property to listen to, not null
      domEventName - the name of the DOM event for which the property should be synchronized to the server, not null
      listener - the property change listener not add, not null
      Returns:
      a handle that can be used for configuring or removing the listener
      Since:
      1.3

    • getProperty

      public String getProperty(String name, String defaultValue)
      Gets the value of the given property as a string. The returned value is converted to a string if it has been set as some other type.
      Parameters:
      name - the property name, not null
      defaultValue - the value to return if the property is not set, or if the value is null
      Returns:
      the property value

    • getProperty

      public String getProperty(String name)
      Gets the value of the given property as a string.
      Parameters:
      name - the property name, not null
      Returns:
      the property value, or null if no value is set

    • getProperty

      public boolean getProperty(String name, boolean defaultValue)
      Gets the value of the given property as a boolean, or the given default value if the underlying value is null.

      A value defined as some other type than boolean is converted according to JavaScript semantics:

      • String values are true, except for the empty string.
      • Numerical values are true, except for 0 and NaN.
      • JSON object and JSON array values are always true.
      Parameters:
      name - the property name, not null
      defaultValue - the value to return if the property is not set, or if the value is null
      Returns:
      the property value

    • getProperty

      public double getProperty(String name, double defaultValue)
      Gets the value of the given property as a double, or the given default value if the underlying value is null

      A value defined as some other type than double is converted according to JavaScript semantics:

      • String values are parsed to a number. NaN is returned if the string can't be parsed.
      • boolean true is 1, boolean false is 0.
      • JSON object and JSON array values are always NaN.
      Parameters:
      name - the property name, not null
      defaultValue - the value to return if the property is not set, or if the value is null
      Returns:
      the property value

    • getProperty

      public int getProperty(String name, int defaultValue)
      Gets the value of the given property as an integer, or the given default value if the underlying value is null

      The value is converted in the same way as for getProperty(String, double), and then truncated to int.

      Parameters:
      name - the property name, not null
      defaultValue - the value to return if the property is not set, or if the value is null
      Returns:
      the property value

    • getPropertyRaw

      public Serializable getPropertyRaw(String name)
      Gets the raw property value without any value conversion. The type of the value is String, Double, Boolean or JsonValue. null is returned if there is no property with the given name or if the value is set to null.
      Parameters:
      name - the property name, not null
      Returns:
      the raw property value, or null

    • removeProperty

      public Element removeProperty(String name)
      Removes the given property.

      Note that properties changed on the server are updated on the client but changes made on the client side are not reflected back to the server unless configured using addPropertyChangeListener(String, String, PropertyChangeListener) and DomListenerRegistration.synchronizeProperty(String).

      Parameters:
      name - the property name, not null
      Returns:
      this element

    • hasProperty

      public boolean hasProperty(String name)
      Checks whether this element has a property with the given name.

      Note that properties changed on the server are updated on the client but changes made on the client side are not reflected back to the server unless configured using addPropertyChangeListener(String, String, PropertyChangeListener) or DomListenerRegistration.synchronizeProperty(String).

      Parameters:
      name - the property name, not null
      Returns:
      true if the property is present; otherwise false

    • getPropertyNames

      public Stream<String> getPropertyNames()
      Gets the defined property names.

      Note that properties changed on the server are updated on the client but changes made on the client side are not reflected back to the server unless configured using addPropertyChangeListener(String, String, PropertyChangeListener) or DomListenerRegistration.synchronizeProperty(String).

      Returns:
      a stream of defined property names

    • isTextNode

      public boolean isTextNode()
      Checks whether this element represents a text node.
      Returns:
      true if this element is a text node; otherwise false

    • setText

      public Element setText(String textContent)
      Sets the text content of this element, replacing any existing children.
      Parameters:
      textContent - the text content to set, null is interpreted as an empty string
      Returns:
      this element

    • getText

      public String getText()
      Gets the text content of this element. This includes only the text from any immediate child text nodes, but ignores text inside child elements. Use getTextRecursively() to get the full text that recursively includes the text content of the entire element tree.
      Returns:
      the text content of this element
      See Also:

    • getTextRecursively

      public String getTextRecursively()
      Gets the text content of this element tree. This includes the text content of all child nodes recursively. Use getText() to only get the text from text nodes that are immediate children of this element.
      Returns:
      the text content of this element and all child elements
      See Also:

    • getClassList

      public ClassList getClassList()
      Gets the set of CSS class names used for this element. The returned set can be modified to add or remove class names. The contents of the set is also reflected in the value of the class attribute.

      Despite the name implying a list being returned, the return type is actually a Set since the in-browser return value behaves like a Set in Java.

      Returns:
      a list of class names, never null

    • getThemeList

      public ThemeList getThemeList()
      Gets the set of the theme names applied to the corresponding element in theme attribute. The set returned can be modified to add or remove the theme names, changes to the set will be reflected in the attribute value.

      Despite the name implying a list being returned, the return type is actually a Set since the in-browser return value behaves like a Set in Java.

      Returns:
      a list of theme names, never null

    • getStyle

      public Style getStyle()
      Gets the style instance for managing element inline styles.
      Returns:
      the style object for the element

    • getComponent

      public Optional<Component> getComponent()
      Gets the component this element has been mapped to, if any.
      Returns:
      an optional component, or an empty optional if no component has been mapped to this element

    • addAttachListener

      public Registration addAttachListener(ElementAttachListener attachListener)
      Adds an attach listener for this element. It is invoked when the element is attached to a UI.

      When a hierarchy of elements is being attached, the event is fired child-first.

      Parameters:
      attachListener - the attach listener to add
      Returns:
      an event registration handle for removing the listener

    • addDetachListener

      public Registration addDetachListener(ElementDetachListener detachListener)
      Adds a detach listener for this element. It is invoked when the element is detached from a UI.

      When a hierarchy of elements is being detached, the event is fired child-first.

      Parameters:
      detachListener - the detach listener to add
      Returns:
      an event registration handle for removing the listener

    • toString

      public String toString()
      Overrides:
      toString in class Object

    • getOuterHTML

      public String getOuterHTML()
      Gets the outer HTML for the element.

      This operation recursively iterates the element and all children and should not be called unnecessarily.

      Returns:
      the outer HTML for the element

    • as

      public <T extends Component> T as(Class<T> componentType)
      Creates a new component instance using this element.

      You can use this method when you have an element instance and want to use it through the API of a Component class.

      This method makes the component instance use the underlying element but does not attach the new component instance to the element so that getComponent() would return the component instance. This means that getParent(), getChildren() and possibly other methods which rely on Element -> Component mappings will not work.

      To also map the element to the Component instance, use Component.from(Element, Class)

      Type Parameters:
      T - the component type
      Parameters:
      componentType - the component type
      Returns:
      the component instance connected to the given element
      See Also:

    • callJsFunction

      public PendingJavaScriptResult callJsFunction(String functionName, Serializable... arguments)
      Calls the given function on the element with the given arguments.

      It is possible to get access to the return value of the execution by registering a handler with the returned pending result. If no handler is registered, the return value will be ignored.

      The function will be called after all pending DOM updates have completed, at the same time that Page.executeJs(String, Serializable...) calls are invoked.

      If the element is not attached or not visible, the function call will be deferred until the element is attached and visible.

      Parameters:
      functionName - the name of the function to call, may contain dots to indicate a function on a property.
      arguments - the arguments to pass to the function. Must be of a type supported by the communication mechanism, as defined by JsonCodec
      Returns:
      a pending result that can be used to get a return value from the execution
      See Also:

    • executeJs

      public PendingJavaScriptResult executeJs(String expression, Serializable... parameters)
      Asynchronously runs the given JavaScript expression in the browser in the context of this element. The returned PendingJavaScriptResult can be used to retrieve any return value from the JavaScript expression. If no return value handler is registered, the return value will be ignored.

      This element will be available to the expression as this. The given parameters will be available as variables named $0, $1, and so on. Supported parameter types are:

      • String
      • Integer
      • Double
      • Boolean
      • JsonValue
      • Element (will be sent as null if the server-side element instance is not attached when the invocation is sent to the client)
      Note that the parameter variables can only be used in contexts where a JavaScript variable can be used. You should for instance do 'prefix' + $0 instead of 'prefix$0' and value[$0] instead of value.$0 since JavaScript variables aren't evaluated inside strings or property names.

      If the element is not attached or not visible, the function call will be deferred until the element is attached and visible.

      Parameters:
      expression - the JavaScript expression to invoke
      parameters - parameters to pass to the expression
      Returns:
      a pending result that can be used to get a value returned from the expression

    • attachShadow

      public ShadowRoot attachShadow()
      Attaches shadow root node.
      Returns:
      the attached shadow root

    • getShadowRoot

      public Optional<ShadowRoot> getShadowRoot()
      Gets the shadow root of the element, if any.
      Returns:
      an optional shadow root node, or an empty optional if no shadow root has been attached

    • setVisible

      public Element setVisible(boolean visible)
      Sets the element visibility value. Also executes pending javascript invocations, if their execution was requested while the element was not visible, and the element is now set as visible.
      Parameters:
      visible - the element visibility value
      Returns:
      this element

    • isVisible

      public boolean isVisible()
      Gets the element visibility value.
      Returns:
      true if the element is visible, false otherwise

    • setEnabled

      public Element setEnabled(boolean enabled)
      Sets the enabled state of the element.
      Parameters:
      enabled - the enabled state
      Returns:
      the element

    • isEnabled

      public boolean isEnabled()
      Get the enabled state of the element.

      Object may be enabled by itself by but if its ascendant is disabled then it's considered as (implicitly) disabled.

      Returns:
      true if node is enabled, false otherwise

    • getSelf

      protected Element getSelf()
      Description copied from class: Node
      Gets the narrow typed reference to this object.
      Specified by:
      getSelf in class Node<Element>
      Returns:
      this object casted to its type

    • scrollIntoView

      public Element scrollIntoView()
      Executes the similarly named DOM method on the client side.
      Returns:
      the element
      See Also:

    • scrollIntoView

      public Element scrollIntoView(ScrollOptions scrollOptions)
      Executes the similarly named DOM method on the client side.
      Parameters:
      scrollOptions - the scroll options to pass to the method
      Returns:
      the element
      See Also: