com.vaadin.flow.dom.

Class 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:

    Serialized Form

    • Constructor Detail

      • 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 (-)

      • Element

        @Deprecated
        public Element(String tag,
                                   boolean autocreate)

        Deprecated. The autoCreate parameter no longer has any effect. Use Element(String) instead.

        Creates an element using the given tag name.

        Parameters:

        tag - tag name of the element. Must be a non-empty string and can contain letters, numbers and dashes (-)

        autocreate - parameter is ignored, but retained in the API for backwards compatibility

    • Method Detail

      • 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:

        setProperty(String, String)

      • 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:

        setProperty(String, String)

      • 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:

        setProperty(String, String)

      • createText

        public static Element createText(String text)

        Creates a text node with the given text.

        Parameters:

        text - the text in the node

        Returns:

        an element representing the text node

      • 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(String, String)

      • 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:

        setAttribute(String, String)

      • 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:

        DomListenerRegistration

      • addEventListener

        @Deprecated
        public DomListenerRegistration addEventListener(String eventType,
                                                                    DomEventListener listener,
                                                                    String... eventDataExpressions)

        Deprecated. Instead, use the returned registration instance for adding event data expressions

        Adds an event listener and event data expressions for the given event type.

        When an event is fired in the browser, custom JavaScript expressions defined in the eventDataExpressions parameter are evaluated to extract data that is sent back to the server. The expression is evaluated in a context where element refers to this element and event refers to the fired event. The result of the evaluation is available in DomEvent.getEventData() with the expression as the key in the JSON object. An expression might be e.g.

        • element.value the get the value of an input element for a change event.
        • event.button === 0 to get true for click events triggered by the primary mouse button.

        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

        eventDataExpressions - definitions for data that should be passed back to the server together with the event

        Returns:

        a handle that can be used for configuring or removing the listener

      • removeFromParent

        public Element removeFromParent()

        Removes this element from its parent.

        Has no effect if the element does not have a parent

        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:

        Node.getParentNode()

      • 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 addSynchronizedProperty(String) and addSynchronizedPropertyEvent(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 addSynchronizedProperty(String) and addSynchronizedPropertyEvent(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 addSynchronizedProperty(String) and addSynchronizedPropertyEvent(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 addSynchronizedProperty(String) and addSynchronizedPropertyEvent(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.

        Use either two way Polymer binding or synchronize property explicitly to be able to get property change events from the client.

        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:

        synchronizeProperty(String, String)

      • 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

      • 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

      • 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 addSynchronizedProperty(String) and addSynchronizedPropertyEvent(String).

        Parameters:

        name - the property name, not null

        Returns:

        true if the property is present; otherwise false

      • 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(), setText(String)

      • 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:

        getText()

      • 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

      • synchronizeProperty

        @Deprecated
        public Element synchronizeProperty(String property,
                                                       String eventType,
                                                       DisabledUpdateMode mode)

        Deprecated. Use addPropertyChangeListener(String, String, PropertyChangeListener) or DomListenerRegistration.synchronizeProperty(String) instead.

        Synchronize the given property's value when the given eventType occurs on this element on the client side. As a result the property's value is automatically updated to this Element.

        Only properties which can be set using setProperty can be synchronized, e.g. classList cannot be synchronized.

        When multiple update mode settings are defined for the same property, the most permissive mode is used. This means that there might be unexpected updates for a disabled component if multiple parties independently configure different aspects for the same component. This is based on the assumption that if a property is explicitly safe to update for disabled components in one context, then the nature of that property is probably such that it's also safe to update in other contexts.

        This is convenience method for batching addSynchronizedProperty(String, DisabledUpdateMode) and addSynchronizedPropertyEvent(String).

        Parameters:

        property - the property name to synchronize

        eventType - the client side event which trigger synchronization of the property values to the server

        mode - controls property update from the client side to the server side when the element is disabled, not null

        Returns:

        this element

      • addSynchronizedProperty

        @Deprecated
        public Element addSynchronizedProperty(String property,
                                                           DisabledUpdateMode mode)

        Deprecated. Use addPropertyChangeListener(String, String, PropertyChangeListener) or DomListenerRegistration.synchronizeProperty(String) instead.

        Adds the property whose value should automatically be synchronized from the client side and updated in this Element.

        Synchronization takes place whenever one of the events defined using addSynchronizedPropertyEvent(String) is fired for the element.

        Only properties which can be set using setProperty can be synchronized, e.g. classList cannot be synchronized.

        When multiple update mode settings are defined for the same property, the most permissive mode is used. This means that there might be unexpected updates for a disabled component if multiple parties independently configure different aspects for the same component. This is based on the assumption that if a property is explicitly safe to update for disabled components in one context, then the nature of that property is probably such that it's also safe to update in other contexts.

        Parameters:

        property - the property name to synchronize

        mode - controls property update from the client side to the server side when the element is disabled, not null

        Returns:

        this 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

      • 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:

        Component.from(Element, Class)

      • callFunction

        public void callFunction(String functionName,
                                 Serializable... arguments)

        Calls the given function on the element with the given arguments.

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

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

        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

        See Also:

        JsonCodec for supported argument types

      • executeJavaScript

        public void executeJavaScript(String expression,
                                      Serializable... parameters)

        Asynchronously runs the given JavaScript expression in the browser in the context of this element. 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.

        Parameters:

        expression - the JavaScript expression to invoke

        parameters - parameters to pass to 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.

        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